I'm starting with AngularJS and I need to bind "load" and "error" events to the iframes:

<ul  data-ng-controller="WebServicesCtrl">
    <li data-ng-repeat="webservice in webservices">
        <a href="{{webservice.wsdl}}">{{webservice.name}}</a>

        <iframe src="{{webservice.wsdl}}" class="hidden"></iframe>

    </li>
</ul>

I tried to use $scope.watch and $scope.apply without success. I need to bind events right on iframe creation, since it will autoload the given src. Something like this:

app.controller('WebServicesCtrl', function WebServicesCtrl($scope, $http) {

    $http.get('/webservices').success(function(data /* from expressjs, yaaay! */) {

        $scope.webservices = data;

        /* make iframes listen to load and error right after scope change,
           before AngularJS inject them. */
    }); 

});

I MUST NOT use <iframe onload="" onerror="" />. I would like to know the jQuery form. The "pure AngularJS" case is wele too. Just don't recall that jQuery is not needed. Sometimes we got huge legacy and things can't be beautiful.

Should I use $injector or something like that? That documentation is so young that hurts. Feel like I'll have to study the source code soon.

I'm starting with AngularJS and I need to bind "load" and "error" events to the iframes:

<ul  data-ng-controller="WebServicesCtrl">
    <li data-ng-repeat="webservice in webservices">
        <a href="{{webservice.wsdl}}">{{webservice.name}}</a>

        <iframe src="{{webservice.wsdl}}" class="hidden"></iframe>

    </li>
</ul>

I tried to use $scope.watch and $scope.apply without success. I need to bind events right on iframe creation, since it will autoload the given src. Something like this:

app.controller('WebServicesCtrl', function WebServicesCtrl($scope, $http) {

    $http.get('/webservices').success(function(data /* from expressjs, yaaay! */) {

        $scope.webservices = data;

        /* make iframes listen to load and error right after scope change,
           before AngularJS inject them. */
    }); 

});

I MUST NOT use <iframe onload="" onerror="" />. I would like to know the jQuery form. The "pure AngularJS" case is wele too. Just don't recall that jQuery is not needed. Sometimes we got huge legacy and things can't be beautiful.

Should I use $injector or something like that? That documentation is so young that hurts. Feel like I'll have to study the source code soon.

• javascript
• jquery
• events
• angularjs
• angularjs-scope

1 Answer 1

Your best option is to use a directive wrapping around these two tags.

<a href="{{webservice.wsdl}}">{{webservice.name}}</a>

<iframe src="{{webservice.wsdl}}" class="hidden"></iframe>

Define something like:

app.directive("aIframe", function () {
   return {
      template: '<div><a href="{{webservice.wsdl}}">{{webservice.name}}</a>' +
                '<iframe src="{{webservice.wsdl}}" class="hidden"></iframe></div>',
      restrict: 'A',
      scope: {
         webservice: '=webService'
      },
      link: function(scope, element, attrs) {
         $(element).find("iframe").on("load", function () {
         //some code
         });
         $(element).find("iframe").on("error", function () {
         //some code
         });
      }
   };
});

The advantage with using the link function is that, it will run on each time the directive is initialized an it will run right after the scope bindings are done from the ng-repeat scope.

Your HTML will now change as:

<ul  data-ng-controller="WebServicesCtrl">
    <li data-ng-repeat="webservice in webservices">
        <div a-iframe web-service="webservice"></div>
    </li>
</ul>

More about directives, and it's parameters, here: AngularJS: Directives