AngularJS-Image "onload" event

Szukałem odpowiedzi na proste, ale nie trywialne pytanie: Jaki jest właściwy sposób na uchwycenie zdarzenia image ' {[1] } w Angular tylko z jqLite? Znalazłem to pytanie , ale chcę jakiegoś rozwiązania z dyrektywami.
Tak jak powiedziałem, nie jest to dla mnie akceptowane: 

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

Ponieważ jest w kontrolerze, a nie w dyrektywie.

Author: ROMANIA_engineer, 2013-07-09
Source

2 answers

Oto dyrektywa do ponownego użycia w stylu wbudowanych dyrektyw obsługi zdarzeń 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 });
          });
        });
      }
    };
  }]);

Po wywołaniu zdarzenia img load wyrażenie w atrybucie SB-load jest obliczane w bieżącym zakresie wraz ze zdarzeniem load, przekazywanym jako $ event. Oto jak go używać:

HTML 

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

JS 

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

Uwaga:" sb " to tylko prefiks, którego używam w moich niestandardowych dyrektywach.

 31
Author: SamBarnes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-06 14:28:22

Ok, jqLite' bind metoda robi dobrze swoją pracę. To idzie tak:

Dodajemy nazwę dyrektywy jako atrybut w naszym znaczniku img. W moim przypadku , po załadowaniu i w zależności od jego wymiarów , obrazek musi zmienić nazwę swojej klasy z "poziomej" na "pionowej", więc nazwa dyrektywy będzie" orientowalna": 

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

I wtedy tworzymy prostą dyrektywę w ten sposób:

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

Example (explicit graphics!): http://jsfiddle.net/5nZYZ/63/

 31
Author: Cherniv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-31 17:39:00