Initialize Angular On Window.onload Event

In a thirth party framework, A html page can be modified by providing javascript code that will be added by the framework to the window onload. From their content can be written to

Solution 1:

You could lazily initialize your app on the page instead of using ng-app directive on page. After you html injection you could initialize angular on your page using angular.bootstrap method basically which takes DOM & then inside array it needs module name.

While doing this you need to add your all the angular component files on the page itself after angular reference. They should be initialized before you bootstrap the app on the page.

window.onload=function() { 
    $('#AddIn').append("<div ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
    //add angular html first//then run angular on the page using angular.bootstrap.
    angular.bootstrap($('#AddIn'), ['demo']);
}

Note: Load jQuery before angular to get jQuery compiled DOM instead of get jQLite compiled DOM.

Solution 2:

In addition to the Pankaj answer, you can use the Angular $window

$window.onload = function (){}