Finished Loading of ng-include in angular js

You can use this code:

$scope.$on('$includeContentLoaded', function () {
    // it has loaded!
});

you can use onload for it as below

<div ng-include=".." onload="finishLoading()"></div>

in controller,

$scope.finishLoading = function() {

}

after loading the ng-include finishLoading scope function will call.

here is the working Demo Plunker


Here's a complete example that will catch all the ng-include load events emitted by the application:

<html ng-app="myApp">
  <head>
    <script src="angular.min.js"></script>
  </head>
  <body ng-controller="myController">
    <div ng-include="'snippet.html'"></div>
    <script>
      var myApp = angular.module("myApp",[]);
      myApp.controller('myController', function($scope) {
        $scope.$on('$includeContentLoaded', function(event, target){
          console.log(event);  //this $includeContentLoaded event object
          console.log(target); //path to the included resource, 'snippet.html' in this case
        });
      });
    </script>
  </body>
</html>

A problem I had, and the reason I take the time to post this, is I failed to include both the ng-app and ng-controller in my HTML markup.


There are two ways to detect when ng-include finished loading, depending on your need:

1) via onload attribute - for inline expressions. Ex:

<div ng-include="'template.html'" onload="loaded = true"></div>

2) via an event $includeContentLoaded that ng-include emits - for app-wide handling. Ex:

app.run(function($rootScope){
  $rootScope.$on("$includeContentLoaded", function(event, templateName){
     //...
  });
});

when it finishes loading the content

Tags:

Angularjs

Angularjs Directive

Recent Posts