加载Angular视图后加载外部脚本

Question

我通过ui-router加载角度视图

    ...
  .state('app.page.search', {
      url: '/search',
      templateUrl: 'tpl/page_search.html'
  })

我随机遇到XXX is not a function ，

在准备好Angular视图后，如何确定外部文件已加载？

tpl / root_layout.html

    <div data-ng-include="'tpl/header.html'"></div>
    <div class="content-container no-padding">
        <div class="container-full">
            <!-- <div data-ng-include="'tpl/search.html'"></div> -->
            <div class="app-content-body fade-in-up" ui-view></div>
        </div>
    </div>
    <div data-ng-include="'tpl/footer.html'"></div>

tpl / page_search.html

    <DOM>
    ....
    <DOM>
    <script type='text/javascript' src='js/scriptA.js'></script>
    <script type='text/javascript' src='js/scriptB.js'></script>

Answer 1

如@Daniel Higueras所建议，请使用UI路由器的解决方案来等待资产加载

.state('state', {
    url: '/state',
    templateUrl: 'url/state.html',
    resolve: {
        asset1: function($http) {
            return $http.get();
        },
        asset2: function($http) {
            return $http.get();
        }
    }
}

如果要在完成所有操作后加载资产，则可以使用ocLazyLoad服务： https ://oclazyload.readme.io/docs/oclazyload-service

只需在您的控制器中使用它即可：

app.controller('ctrl', function($ocLazyLoad) {
    $ocLazyLoad.load('asset1.js').then(
        function(res) {
            // asset 1 is available
        }
    );
    $ocLazyLoad.load('asset2.js').then(
        function(res) {
            // asset 2 is available
        }
    );
});

当您拥有大型资产（例如D3时，这很有用，因为只有您应用的一页使用它，因此您不想每次加载应用时都将其拉入。