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

There is an alternative for that only using JS call stack tricks. put ng-init="eventName" on the desired element. After that, declare the event on the angular controller:

$scope.eventName = () => {
  setTimeout(() => { alert('loaded!'); }, 0);
}

That makes the alert only pop up when everything about angular is loaded, that occur because of the call-stack of JavaScript that considers some codes as Microtasks and some others as Macrotasks and they have priorities like the Microtasks run always first and just after all Microtasks run, the Macrotasks can take the place on the call-stack.

And, setTimeout() is considered a Macrotask for JavaScript, so it will only run as the latest tasks.