如何添加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 !'); 
}); 
...