ng-onload

Binds 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 </code> looks into window.test for a callback we need to bound the onload event to look into provided angular scope for the callback.</p><p class="my-3"></br></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"> bower install ng-onload --save</p><p class="my-3"></br></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Super short version of how to use the ng-load directive in your Angular application.</p><p class="my-3"> // Include it in Angular as per<br /> angular.module("magicalRocketUnicornApplication", [ "ngOnload" ])</p><p class="my-3"> // After that it's ready to rock - Usage in HTML<br /> // 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<br /> <iframe src="www.foobar.com" ng-onload="callbackFromScope(contentLocation)">

`$3`


A longer example with some other Angular content included that you'll normally have in your Angular.js application.
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:
    
        
            
            
            
            
        
        
            

				
                
            

        
    

Developing
Prerequisites:
* Have yarn installed globally (npm i -g yarn)
``bash
$ yarn install    # install dependencies
$ npm run build   # builds the release and makes sure everything is good
`
Other

You can find and example .html and how it's used inside the /test directory. There currently are no specific unit tests available but feel free to contribute.Please note that the code is written in ES6 JavaScript which is then compiled to ES5 compatible JavaScript and the compiled + uglified result can be found from /release/ng-onload.min.js.
This small angular directive started from my old GIST: https://gist.github.com/mikaturunen/f0b45def06bc83ccea9e
FAQ
#### 1
Q. iframe location does not work! It's undefined!
A. It does. It has been fixed and it explicitly takes advantage of named properties and that's some dark magic right there. Look at the test/index.test.html` to see it in action.

ng-onload

Binds 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 </code> looks into window.test for a callback we need to bound the onload event to look into provided angular scope for the callback.</p><p class="my-3"></br></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">    bower install ng-onload --save</p><p class="my-3"></br></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />Super short version of how to use the ng-load directive in your Angular application.</p><p class="my-3">    // Include it in Angular as per<br />    angular.module("magicalRocketUnicornApplication", [ "ngOnload" ])</p><p class="my-3">    // After that it's ready to rock - Usage in HTML<br />    // 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<br />    <iframe src="www.foobar.com" ng-onload="callbackFromScope(contentLocation)">

$3


A longer example with some other Angular content included that you'll normally have in your Angular.js application.
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:
    
        
            
            
            
            
        
        
            

				
                
            

        
    

Developing
Prerequisites:
* Have yarn installed globally (npm i -g yarn)
``bash
$ yarn install    # install dependencies
$ npm run build   # builds the release and makes sure everything is good
`
Other

You can find and example .html and how it's used inside the /test directory. There currently are no specific unit tests available but feel free to contribute.Please note that the code is written in ES6 JavaScript which is then compiled to ES5 compatible JavaScript and the compiled + uglified result can be found from /release/ng-onload.min.js.
This small angular directive started from my old GIST: https://gist.github.com/mikaturunen/f0b45def06bc83ccea9e
FAQ
#### 1
Q. iframe location does not work! It's undefined!
A. It does. It has been fixed and it explicitly takes advantage of named properties and that's some dark magic right there. Look at the test/index.test.html` to see it in action.

ng-onload

ng-onload

`$3`

Developing

`Other`

`FAQ`

`ng-onload`

`ng-onload`

`$3`

Developing

`Other`

`FAQ`