AngularJS – Evento “onload” de imagem

Eu tenho procurado por uma resposta à pergunta simples, mas não trivial: o que é uma maneira correta de capturar o evento onload imagem em Angular apenas com jqLite? Eu encontrei esta pergunta , mas eu quero alguma solução com diretivas.
Então, como eu disse, isso não é aceito por mim:

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

porque está no controlador, não na diretiva.

Aqui está uma diretiva reutilizável no estilo das diretivas de manipulação de events internos do 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 }); }); }); } }; }]); 

Quando o evento img load é acionado, a expressão no atributo sb-load é avaliada no escopo atual junto com o evento load, passado como $ event. Veja como usá-lo:

HTML

 

JS

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

Nota: “sb” é apenas o prefixo que eu uso para minhas diretivas personalizadas.

Ok, jqLite ‘ bind método fazendo bem o seu trabalho. É assim:

Estamos adicionando o nome da diretiva como atributo em nossa tag img . No meu caso, após o carregamento e dependendo de suas dimensões, a imagem precisa mudar seu nome de class de “horizontal” para “vertical”, então o nome da diretiva será “orientável”:

  

E então estamos criando diretivas simples como esta:

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

Exemplo (charts explícitos!): http://jsfiddle.net/5nZYZ/63/