Finished Loading of ng-include in angular js

39,713

Solution 1

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

Solution 2

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

Solution 3

You can use this code:

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

Solution 4

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.

View more solutions

39,713

Author by

Shohel

Hi, I am Shohel Rana, a creative software developer with a solid programming background on web technologies, endeavoring to come to global attention in the tech world. As a software engineer, I enjoy bridging the gap between research and engineering combining my technical knowledge with my sharp eye for Machine Learning and Data Science to create an innovative application. When I'm not in front of a computer screen, I'm probably busy with doing some research on AI stuffs or focusing on setting myself up for achieving a leadership role in any challenging and creative environment. KEY SKILLS • JavaScript (ES6/ES2015), TypeScript, React (Hook, Redux, Context API), Angular 2+ (Material, ngRx, ngXs), AngularJS, Vue, RequireJS, jQuery, jQuery UI, Ajax, Webpack, Gulp, Yarn, Bower, Angular CLI, CreateReactApp, Jasmine, Karma, Protractor, Jest, Mocha, Enzyme. • HTML5, CSS, Twitter Bootstrap, Material Design, SASS. • .NET (C#, ASP.NET, ASP.NET MVC, ASP.NET Core, WPF, Silverlight, ADO.NET, EF, SSRS, RDLC, Crystal Report), Java (Spring, Spring Boot, Hibernate, Maven, Jesper) NodeJS (Express.js, Next.js), Microservices, SOAP, REST, PHP (Laravel, WordPress). • MySQL, MsSQL, MongoDB, NeoDB, Redis, PostgreSQL, Oracle. • TFS, Git, SVN, Docker. • AI (Natural Language Processing, Machine Learning, Deep Learning, Expert System)

Updated on June 22, 2020

Comments

Shohel about 4 years

What is the best way to detect the end of html loading by ng–include? I want to write some code that runs when it has finished loading.
Jonatas Walker over 8 years

How this answer add anything new?
Lucas over 7 years

NOTE: there is a major difference between these two sections of code. The onload attribute will be called AFTER all images and content within the template is loaded, whereas $includeContentLoaded will load BEFORE any images are loaded; it will load when the arbitrary HTML content is loaded into the <div>.
C0ZEN over 7 years

The best clean and fastest angular way response here.
Leonardo Chaia almost 6 years

@think123 it seems to me that both events are fired at the same time? check the source