加载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这样的大型资源，只有您应用的一个页面使用它，那么这很有用，因此您不希望每次应用加载时都将其拉出来。