加載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時，這很有用，因為只有您應用的一頁使用它，因此您不想每次加載應用時都將其拉入。