Tạo directive image loaded trong AngularJS

Code tạo directive và demo nhận diện 1 hình ảnh đã load xong (image loaded) và trigger function kèm theo

Code Directive

[syntax type=”js”]

angular.module(“trankyphatApp.directives”, []).directive(“imageLoaded”, function () {
return {
restrict: “A”,
scope: {
imageLoadeded: “=”
},
link: function (scope, element, attrs) {
element.bind(“load”, function () {
scope.imageLoadeded();
});
scope.$on(“$destroy”, function () {
element.unbind(“load”);
});
}
};
});

[/syntax]

Code sử dụng bên view

[syntax type=”html”]

<img image-loaded image-loadeded=”imageLoaded” ng-src=”/App/images/bg_1.png”  />

[/syntax]

Code trong Angular Controller, mình chỉ khai báo phần body

[syntax type=”js”]

$scope.imageLoaded = function () {

alert(“Image loaded”);

};

[/syntax]