Question

我一直在寻找一个简单但不是微不足道的问题的答案：只有使用jqLite才能在Angular中捕获图像'onload事件的正确方法是什么？我找到了this question，但我想要一些指令解决方案正如我所说，我不接受这个：

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

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

Answer 1

这是一个可重复使用的指令，采用角度内置事件处理指令的风格：

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) {
        // ...
    }

注意：＆＃34; sb＆＃34;只是我用于自定义指令的前缀。

Answer 2

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

我们在img标记中添加了指令'name as attribute。在我的情况下，加载后，根据其尺寸，图像必须将其类名从“水平”更改为“垂直”，因此指令的名称将是“可定向的”：

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

Answer 4

您可以在angular js中调用onload事件的javascript版本。此ng-load事件可应用于任何dom元素，例如div，span，body，iframe，img等。以下是在现有项目中添加ng-load的链接。

download ng-load for angular 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>

AngularJS - 图像“onload”事件

4 个答案: