javascript - tutorial - AngularJS-Evento "onload" de imagen

ng-file-upload tutorial

Question

He estado buscando una respuesta a una pregunta simple pero no trivial: ¿cuál es la forma correcta de detectar el evento de carga de imágenes en Angular solo con jqLite? Encontré esta pregunta , pero quiero una solución con las directivas.
Entonces, como dije, esto no me fue aceptado:

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

porque está en el controlador, no en la directiva.

Answer 1

Aquí hay una directiva reutilizable en el estilo de las directivas de manejo de eventos incorporados de 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 });
          });
        });
      }
    };
  }]);

Cuando se activa el evento de carga img, la expresión en el atributo sb-load se evalúa en el ámbito actual junto con el evento de carga, pasado como $ event. He aquí cómo usarlo:

HTML

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

JS

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

Nota: "sb" es solo el prefijo que uso para mis directivas personalizadas.

Answer 2

Ok, el método jqLite '' bind hace bien su trabajo. Dice así:

Estamos agregando el nombre de la directiva como atributo en nuestra etiqueta de img . En mi caso, después de cargar y dependiendo de sus dimensiones, la imagen tiene que cambiar su nombre de clase de "horizontal" a "vertical", por lo que el nombre de la directiva será "orientable":

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

Y luego estamos creando una directiva simple 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";
                }
            });
        }
    }
});

Ejemplo (gráficos explícitos!): http://jsfiddle.net/5nZYZ/63/