Angular, onLoad function on an iFrame Angular, onLoad function on an iFrame angularjs angularjs

Angular, onLoad function on an iFrame


Commenting on a year old question.For cases where there are more than 1 iframes, I needed to bind "onload" events on to.I did this approach.

Directive

APP.directive('iframeOnload', [function(){return {    scope: {        callBack: '&iframeOnload'    },    link: function(scope, element, attrs){        element.on('load', function(){            return scope.callBack();        })    }}}])

Controller

APP.controller('MyController', ['$scope', function($scope){    $scope.iframeLoadedCallBack = function(){        // do stuff    }}]);

DOM

<div ng-controller="MyController">    <iframe iframe-onload="iframeLoadedCallBack()" src="..."></iframe></div>


try defining the function within controller as:

window.uploadDone=function(){  /* have access to $scope here*/}


For anyone using Angular 2+,It's simply:

<iframe (load)="uploadDone()"></iframe>

No global function, works with multiple iframe.