AngularJS – 图像“onload”事件

我一直在寻找一个简单但不是微不足道的问题的答案：什么是正确的方式来捕捉图像'在Angular的onload事件只有jqLit​​e？ 我发现这个问题 ，但我想要一些解决scheme的指令。
正如我所说，这不被我接受：

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

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

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属性中的expression式会在当前作用域中与加载事件一起评估，并以$ eventforms传入。 以下是如何使用它：

HTML

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

JS

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

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

Answer 2

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

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

 <img ng-src="image_path.jpg" class="horizontal" orientable /> 

然后我们正在创build这样简单的指令：

 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"; } }); } } }); 

示例（显式graphics！）： http : //jsfiddle.net/5nZYZ/63/