AngularJS - 图像“加载”事件

Posted 2023-02-22

【中文标题】AngularJS - 图像“加载”事件

【英文标题】：AngularJS - Image "onload" event

【发布时间】：2013-07-07 00:59:45

【问题描述】：

我一直在寻找一个简单但并非微不足道的问题的答案：什么是仅使用 jqLit​​e 在 Angular 中捕获图像'onload 事件的正确方法？我找到了 this question ，但我想要一些带有指令的解决方案。 所以正如我所说，这对我来说是不被接受的：

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

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

【参考方案1】：

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 Directive API Reference。

【参考方案2】：

好的，jqLit​​e'bind 方法做得很好。它是这样的：

我们在 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/

【参考方案3】：

这是 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 加载事件被触发时，sb-load 属性中的表达式与加载事件一起在当前范围内进行评估，作为 $event 传入。使用方法如下：

HTML

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

JS

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

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

【讨论】：

谢谢山姆，这就像一个魅力，我想我会留下 sb 前缀给你。

赞一个可扩展的解决方案，该解决方案在没有 jqLit​​e（已从 Angular 2 中删除）的情况下运行良好