30

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

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

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

4

3 回答 3

38

这是 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”只是我用于自定义指令的前缀。

于 2014-11-06T14:28:22.283 回答
31

好的,jqLit​​e 的bind方法做得很好。它是这样的:

我们在img标签中添加指令名称作为属性。在我的情况下,加载后并根据其尺寸,图像必须将其类名从 "horizo​​ntal" 更改为 "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/

于 2013-07-09T12:24:32.033 回答
6

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 参考

于 2019-03-30T14:20:33.427 回答