AngularJS - Bild "onload" -Ereignis

Question

Ich habe nach einer Antwort auf einfache, aber nicht triviale Frage gesucht: Was ist ein richtiger Weg, um Bild 'onload Ereignis in Angular nur mit jqLite zu fangen? Ich habe this question gefunden, aber ich möchte eine Lösung mit Direktiven.
Also wie gesagt, das ist nicht für mich akzeptiert:

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

, weil es in der Steuerung ist, nicht in der Richtlinie.

Answer 1

Hier ist eine wiederverwendbare Richtlinie im Stil der Winkel des eingebauten Event-Handling-Richtlinien:

Wenn das Ereignis img load ausgelöst wird, wird der Ausdruck im Attribut sb-load im aktuellen Bereich zusammen mit dem load -Ereignis ausgewertet, das als $ event übergeben wird. Hier ist, wie es zu benutzen:

HTML

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

JS

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

Hinweis: "sb" ist nur das Präfix ich für meine benutzerdefinierten Richtlinien verwenden.

Answer 2

Ok, jqLite 'bind Methode, die ihren Job gut macht. Es geht so:

Wir fügen den Namen der Direktive als Attribut in unserem img Tag hinzu. In meinem Fall, nach dem Laden und abhängig von seinen Abmessungen, muß Bild seine Klassennamen ändern von „horizontal“ auf „vertikal“, so Name der Richtlinie wird „orient“:

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

Und dann schaffen wir einfach Richtlinie wie folgt aus:

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

Beispiel (explizite Grafik!): http://jsfiddle.net/5nZYZ/63/