异步问题

Question

使用案例

在我的index.html中。我有两个ng-include指令和两个自定义指令。

每个指令都有自己的src属性定义了从另一个服务器加载一些html片段的地址（自定义指令的模板属性加载了html）

在调用第五个ng-include指令（4）从另一个服务器加载java脚本之前，我需要确保所有指令（参见代码1,2,3）已完全加载了html片段。

现在所有指令都是异步运行的，我不能确定加载Javascript的指令应该始终是最后加载的指令。我需要这个，因为如果在html之前加载和执行Javascript它不会通过html并将其链接到javascript / jQuery。

我用非常经典的方式解决了这个问题。每当加载html片段时我都会更新一个全局变量，并定义一个ng-include指令，当全局变量为true表示所有其他指令都加载了他们的html时，有条件地加载Javascript。但这不是Angular方式。我需要Angular方式，顺便说一下，我是Angular的新手。

的index.html

<div ng-controller="navigationController" >

            **(1)**<agilesites-navbar></agilesites-navbar>

            <div class="container-fluid">
                <div class="row row-offcanvas row-offcanvas-right">
                    <div id="offcanvas-curtain" class="hidden-lg"></div>
                    <div id="contentContainer" class="col-sm-12 col-md-12 col-lg-12">
                       <div ui-view="content" id="content"></div>
                    </div>
                    **(2)**<agilesites-sidebar></agilesites-sidebar>
                </div>
            </div>

            **(3)**<ng-include src="''+API_HOST+'api/cms/footer'" onload="cmsResourceLoadingStatus(true)"></ng-include>
            **(4)**<ng-include src="''+API_HOST+'api/cms/javascript'"  ng-if="cmsResourceLoadingCompleted"></ng-include>
        </div>

自定义指令（agilesites-sidebar）：

angular.module('newhorizonsApp')
    .directive('agilesitesSidebar', ['ProductTypes','$compile', function (ProductTypes,$compile) {
    return {
        restrict: 'E',
        scope: true,
        template: '<ng-include src="\'\'+API_HOST+\'api/cms/sidebar\'" onload="executeOnLoad();"></ng-include>',
        link: function (scope,elem){

            scope.executeOnLoad = function() {

                scope.cmsResourceLoadingStatus(true);
            };


        }
    };
}]);