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.
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With