how to add ng-include callback to multiple ng-include directives in angular js

Question

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?

Sreekumar SH · Accepted Answer · 2014-09-11T10:05:00.367

5

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
}

edited Sep 11 '14 at 10:05

answered Sep 11 '14 at 06:43

Sreekumar SH

381
4
12

this is not generalized bcus ng-include may not be 3 always – Sep 11 '14 at 07:49
edited the code to take the div count , provided all the divs in the form are ng-include divs.. – Sreekumar SH Sep 11 '14 at 10:05
this requires jquery? – Sep 11 '14 at 10:48
2

Yes that requires jquery but there are many other ways by whcih you can get the count. – Sreekumar SH Sep 11 '14 at 11:45

score 2 · Answer 2 · answered Sep 11 '14 at 06:27

ng-include triggers a request that goes through the template cache. This is done async so No, angular cannot provide you with a trigger for when all templates done loading.

You can prefetch the templates to the cache and handle the event from there ...

For example,

// 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 !');
});
...

thanks, i added this . not able to print `console.log('All templates are loaded into the cache !');` — , Sep 11 '14 at 08:31

how to add ng-include callback to multiple ng-include directives in angular js

2 Answers2

Linked