AngularJS-图片“加载”事件

一尘不染

AngularJS-图片“加载”事件

javascript

我一直在寻找一个简单但并非琐碎的问题的答案：onload仅使用jqLite在Angular中捕获图像事件的正确方法是什么？但是我想要一些指令解决方案。因此，正如我所说，这对我来说是不可接受的：

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

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

阅读 496

2020-05-01

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

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

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

2020-05-01