AngularJS - изображение «onload» event

Question

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

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

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

Answer 1

Вот многоразовый директива в стиле встроенных директив обработки событий угловых в:

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> 

JS

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

Примечание: "ШБ" просто префикс я использую для моих пользовательских директив.

Answer 2

Ok, 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/