Angular, onLoad function on an iFrame

Question

I have this iframe working with basic JavaScript:

<iframe id="upload_iframe" name="upload_iframe" onLoad="uploadDone();"></iframe>

Which triggers the method uploadDone(); when the content of the iframe has been loaded.

How do I do the same thing in Angular?. I want to call a function on the controller when the iframe loads, but I haven't seen a ng-onload so far.

Answer 1

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>

Answer 2

try defining the function within controller as:

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

Answer 3

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

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

No global function, works with multiple iframe.