如何添加NG-包括角JS

Question

回调到多个NG-包括指令我有我的HTML这样

<form ng-controller="testCtrl1"> 
    <div ng-include="'test/views/navigationbar.html'"></div> 
    <div ng-include="'test/views/processnav.html'"></div> 
    <div ng-include="'test/views/leftprocesstabs.html'"></div> 
    </div> 
</form> 

我想写通用的方法来检查我所有的NG-包括文件被加载。

加载完所有文件后，我需要进行服务器调用。

有没有什么办法来检查这在角js？

Answer 1

使用每个模板的onload和增加的计数器。 如果表单只包含ng-include div，则使用beow代码来获取计数，或者编写一个函数来获取ng-include的div数。

HTML

<form ng-controller="testCtrl1" id="includes"> 
    <div ng-include="'test/views/navigationbar.html'" onload="load()"></div> 
    <div ng-include="'test/views/processnav.html'" onload="load()"></div> 
    <div ng-include="'test/views/leftprocesstabs.html'" onload="load()"></div> 
    </div> 
</form> 

的Javascript

var templates = 0; 
var length = $("#includes > div").length; 
$scope.load = function(){ 
    templates++; 
    if(templates >= length){ 
     onLoadComplete() 
    } 

} 
function onLoadComplete(){ 
    // all templates are loaded 
} 

Answer 2

ng-include触发通过模板缓存的请求。这是异步完成，否则，角度不能为您提供所有模板加载完成时的触发器。

可以预取模板缓存，并从那里处理事件...

例如，

// inject $q, $http, $templateCache to your controller 
... 
var promises = []; 
promises.push($http.get('test/views/navigationbar.html',{ cache : $templateCache })); 
promises.push($http.get('test/views/processnav.html',{ cache : $templateCache })); 
promises.push($http.get('test/views/leftprocesstabs.html',{ cache : $templateCache })); 
$q.all(promises, function (data) { 
console.log('All templates are loaded into the cache !'); 
}); 
...