Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Finished Loading of ng-include in angular js

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.

like image 453
Shohel Avatar asked Dec 20 '14 03:12

Shohel


People also ask

What is Ng-include in AngularJS?

AngularJS ng-include Directive The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename.

Does Ng-include create a new scope?

In this case, where you need to load templates from other domains or other protocols, then you can add them to your trusted resource URL list, which will set the url as a trusted url in your application. The ng-include directive is executed at priority level -400 and creates new scope every time it is invoked.

What happens when AngularJS based application page loads in the browser?

When the page is loaded in the browser; HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed.


1 Answers

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

like image 143
New Dev Avatar answered Sep 20 '22 06:09

New Dev