我一直在寻找一个简单但不是平凡的问题的答案:在Angular中只使用jqLite正确地捕获图像 onload
事件的方法是什么? 我找到了这个问题,但我想要一些使用指令的解决方案。
所以正如我所说,这对我来说是不可接受的:
.controller("MyCtrl", function($scope){
// ...
img.onload = function () {
// ...
}
因为它在控制器中,而不是指令中。
我一直在寻找一个简单但不是平凡的问题的答案:在Angular中只使用jqLite正确地捕获图像 onload
事件的方法是什么? 我找到了这个问题,但我想要一些使用指令的解决方案。
所以正如我所说,这对我来说是不可接受的:
.controller("MyCtrl", function($scope){
// ...
img.onload = function () {
// ...
}
因为它在控制器中,而不是指令中。
这是一个可重复使用的指令,类似于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属性中的表达式将与传递进来的$event一起在当前作用域中进行评估。以下是如何使用它的方式:
HTML<div ng-controller="MyCtrl">
<img sb-load="onImgLoad($event)">
</div>
JS
=>JS
.controller("MyCtrl", function($scope){
// ...
$scope.onImgLoad = function (event) {
// ...
}
注意:"sb"只是我用于自定义指令的前缀。
好的,jqLite的 bind
方法很好地完成了它的工作。它的用法如下:
我们将指令的名称作为属性添加到我们的 img
标签中。在我的情况下,根据图像的尺寸,在加载后图像必须将其类名从“horizontal”更改为“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/
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参考。