ngOnload directive for allowing callbacks from Angulars Scope to be executed on elements onload event.
npm install ng-onloadBinds Angular.js scope function to given HTML elements onload event; for example, iframe.
There is no direct way of binding angular to elements onload event as commonly the HTML elements onload="" attribute looks into the JavaScripts global name space (window.*) which is a big no-no. It used to be the norm back in the day of how to do things but with modern frameworks like AngularJs and the such the approach has changed a lot.
This is just one example (and by no means the only way) of how to get Angular behave nicely with HTML elements onload event. As looks into window.test for a callback we need to bound the onload event to look into provided angular scope for the callback.
bower install ng-onload --save
// Include it in Angular as per
angular.module("magicalRocketUnicornApplication", [ "ngOnload" ])
// After that it's ready to rock - Usage in HTML
// Please note the use of 'contentLocation' variables, it's a named property and this way it provides the 'location' of the IFrame to the callback
application.js:
// Creating magical Angular application to solve problem X
angular
.module("magicalRocketUnicornApplication", [ "ngOnload" ])
.controller("UnicornController", function($scope) {
// This is the scope callback we are going to call when the elements
// onload event triggers
$scope.hello = function(contentLocation) {
// contentLocation === iframe.contentWindow.location
// it's undefined when contentWindow cannot be found from the bound element
alert("Hello world!");
};
});
index.html: