AngularJS - изображение "onload" событие

Я искал ответ на простой, но не тривиальный вопрос: что такое правильный способ захватить изображение onload событие в Angular только с помощью jqLite? Я нашел этот вопрос, но мне нужно некоторое решение с директивами.
Как я уже сказал, это не принято для меня:

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

поскольку он находится в контроллере, а не в директиве.

Ответ 1

Здесь приведена директива re-usable в стиле angular встроенных директив обработки событий:

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 });
          });
        });
      }
    };
  }]);

При запуске события загрузки img выражение в атрибуте sb-load оценивается в текущей области вместе с событием загрузки, переданным как $event. Вот как его использовать:

HTML

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

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

Примечание: "sb" - это только префикс, который я использую для своих пользовательских директив.

Ответ 2

Хорошо, jqLite 'bind метод хорошо выполняет свою работу. Это происходит следующим образом:

Мы добавляем директивное имя в качестве атрибута в наш тег img. В моем случае после загрузки и в зависимости от его размеров изображение должно изменить свое имя класса от "горизонтального" до "вертикального", поэтому директивное имя будет "ориентируемым":

<img ng-src="image_path.jpg" class="horizontal" orientable />

И тогда мы создаем простую директиву следующим образом:

var app = angular.module('myApp',[]);

app.directive('orientable', function () {       
    return {
        link: function(scope, element, attrs) {   

            element.bind("load" , function(e){ 

                // success, "onload" catched
                // now we can do specific stuff:

                if(this.naturalHeight > this.naturalWidth){
                    this.className = "vertical";
                }
            });
        }
    }
});

Пример (явная графика!): http://jsfiddle.net/5nZYZ/63/