我一直在寻找简单但并非微不足道的问题的答案：onload仅使用 jqLite 在 Angular 中捕获图像事件的正确方法是什么？我发现了这个问题，但我想要一些带有指令的解决方案。
正如我所说，这对我来说是不被接受的：
.controller("MyCtrl", function($scope){
// ...
img.onload = function () {
// ...
}
因为它在控制器中，而不是在指令中。
AngularJS - 图像“加载”事件
IT技术
javascript
angularjs
angularjs-directive
onload
jqlite
2021-02-08 01:48:34
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”只是我用于自定义指令的前缀。
好的，jqLite'bind方法做得很好。它是这样的：
我们在img标签中添加指令名称作为属性。就我而言，在加载后并根据其尺寸，图像必须将其类名从“水平”更改为“垂直”，因此指令的名称将是“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/
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 参考。