AngularJS - 图片"onload"事件

Question

我一直在寻找一个简单但不是平凡的问题的答案：在Angular中只使用jqLite正确地捕获图像 onload 事件的方法是什么？ 我找到了这个问题，但我想要一些使用指令的解决方案。
所以正如我所说，这对我来说是不可接受的：

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

因为它在控制器中，而不是指令中。

- Ivan Chernykh

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属性中的表达式将与传递进来的$event一起在当前作用域中进行评估。以下是如何使用它的方式： HTML

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

JS

=>

JS

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

注意："sb"只是我用于自定义指令的前缀。

- SamBarnes

---

谢谢Sam，这很有效，我想我会保留“sb”前缀来表彰你。 - Michiel

赞一个可扩展的解决方案，它可以在没有 jqLite（已从 Angular 2 中删除）的情况下正常工作。 - Asaf Yonay

Answer 2

好的，jqLite的 bind 方法很好地完成了它的工作。它的用法如下：

我们将指令的名称作为属性添加到我们的 img 标签中。在我的情况下，根据图像的尺寸，在加载后图像必须将其类名从“horizontal”更改为“vertical”，因此指令的名称将是“orientable”：

<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/

- Ivan Chernykh

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指令API参考。

- georgeawg