我一直在寻找一个简单但并非琐碎的问题的答案:onload仅使用jqLite在Angular中捕获图像事件的正确方法是什么?但是我想要一些指令解决方案。 因此,正如我所说,这对我来说是不可接受的:
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属性中的表达式与load事件一起评估,并作为$ event传入。使用方法如下:
HTML
<div ng-controller="MyCtrl"> <img sb-load="onImgLoad($event)"> </div>
JS
.controller("MyCtrl", function($scope){ // ... $scope.onImgLoad = function (event) { // ... }
注意:“ sb”只是我用于自定义指令的前缀。