如何将 ng-include 回调添加到 angular js 中的多个 ng-include 指令 [英] how to add ng-include callback to multiple ng-include directives in angular js

问题描述

我的 HTML 是这样的

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

</表单>

我想写一个通用的方法来检查我所有的 ng-include 文件是否已加载.

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

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

解决方案

使用每个模板的 onload 并增加一个计数器.如果表单只包含 ng-include div，使用下面的代码获取计数，或者编写一个函数来获取带有 ng-include 的 div 计数.

HTML

<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>

</表单>

Javascript

var 模板 = 0;var length = $("#includes > div").length;$scope.load = function(){模板++；如果(模板 >= 长度){onLoadComplete()}}函数 onLoadComplete(){//加载所有模板}

I have my HTML like this

  <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>

I want to write generalized method to check all my ng-include file are loaded.

After loading all file i need to make a server call.

Is there any way to check this in angular js?

解决方案

use the onload of each template and increment a counter. if the form contains only ng-include divs, use the beow code to get the count, or write a function to get the count of divs with ng-include.

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
}

这篇关于如何将 ng-include 回调添加到 angular js 中的多个 ng-include 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！