AngularJS - изображение "onload" событие

Question

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

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

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

Answer 1

Вот директива многократного использования в стиле встроенных директив обработки событий 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 });
          });
        });
      }
    };
  }]);

Когда запускается событие img load, выражение в атрибуте sb-load оценивается в текущей области вместе с событием load, передаваемым как $event. Вот как это использовать:

HTML

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

JS

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

Примечание: "sb" - это просто префикс, который я использую для своих пользовательских директив.

Answer 2

Хорошо, jqLite' bind метод хорошо справляется со своей работой. Это выглядит так:

Мы добавляем директиву ' name как атрибут в наш 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/

Answer 3

AngularJS V1.7.3 добавлен ng-on-xxx директива:

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

AngularJS предоставляет специальные директивы для многих событий, таких как ngClick, поэтому в большинстве случаев нет необходимости использовать ngOn, Однако AngularJS не поддерживает все события, и новые события могут быть введены в более поздние стандарты DOM.

Для получения дополнительной информации см. Справочник по AngularJS ng-on.

Answer 4

Вы можете вызвать версию события onload на javascript в формате js. это событие ng-load может быть применено к любому элементу dom, такому как div, span, body, iframe, img и т. д. Ниже приведена ссылка для добавления ng-load в существующий проект.

скачать ng-load для угловой js

npm i angular-ng-load

Ниже приведен пример для iframe: после загрузки в контроллере будет вызвана testCallbackFunction

ПРИМЕР

JS

    // include the `ngLoad` module
    var app = angular.module('myApp', ['ngLoad']);
    app.controller('myCtrl', function($scope) {
        $scope.testCallbackFunction = function() {
          //TODO : Things to do once Element is loaded
        };

    });  

HTML

  <div ng-app='myApp' ng-controller='myCtrl'> 
      <iframe src="test.html" ng-load callback="testCallbackFunction()">  
  </div>