Finished Loading of ng-include in angular js

Question

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.

Answer 1

If I have to wait for the element to be present, I wrap a $timeout with $includeContentLoaded:

var selector = '#foo';
$rootScope.$on('$includeContentLoaded', function(event, templateName){
  $timeout(() => {
    const $el = angular.element(selector);
    if ($el.length) {
      // Do stuff with element.
    }
  });
});

The timeout gives it time load properly, specially if the ng-include contains a directive that takes a few milliseconds to render.