javascriptangularjsangularjs-directiveonloadjqlite

AngularJS - Image "onload" event


I've been searching for an answer to simple but not trivial question: What is a right way to catch image' onload event in Angular only with jqLite? I found this question , but I want some solution with directives.
So as I said, this is not accepted for me:

.controller("MyCtrl", function($scope){
    // ...
    img.onload = function () {
        // ...
    }

because it is in controller, not in directive.


Solution

  • Here's a re-usable directive in the style of angular's inbuilt event handling directives:

    angular.module('sbLoad', [])
    
      .directive('sbLoad', ['$parse', function ($parse) {
        return {
          restrict: 'A',
          link: function (scope, elem, attrs) {
            var fn = $parse(attrs.sbLoad);
            elem.on('load', function (event) {
              scope.$apply(function() {
                fn(scope, { $event: event });
              });
            });
          }
        };
      }]);
    

    When the img load event is fired the expression in the sb-load attribute is evaluated in the current scope along with the load event, passed in as $event. Here's how to use it:

    HTML

    <div ng-controller="MyCtrl">
      <img sb-load="onImgLoad($event)">
    </div>
    

    JS

      .controller("MyCtrl", function($scope){
        // ...
        $scope.onImgLoad = function (event) {
            // ...
        }
    

    Note: "sb" is just the prefix I use for my custom directives.