如何将 ng-include 回调添加到 angular js 中的多个 ng-include 指令

Question

我有这样的 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-include 文件是否已加载。

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

有没有办法在angular js中检查这个？

Answer 1

使用每个模板的加载并增加一个计数器。如果表单只包含 ng-include div，使用下面的代码获取计数，或者编写一个函数来获取带有 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
}