Sự kiện tải hình ảnh cho ng-src trong AngularJS

Tôi có những hình ảnh trông giống như <img ng-src="dynamically inserted url"/>. Khi một hình ảnh được tải, tôi cần áp dụng phương thức iScroll refresh () để làm cho hình ảnh có thể cuộn được.

Cách tốt nhất để biết khi nào một hình ảnh được tải đầy đủ để chạy một số lệnh gọi lại là gì?

Đây là một ví dụ về cách gọi hình ảnh onload http://jsfiddle.net/2CsfZ/2/

Ý tưởng cơ bản là tạo một chỉ thị và thêm nó làm thuộc tính cho thẻ img.

JS:

app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
            });
            element.bind('error', function(){
                alert('image could not be loaded');
            });
        }
    };
});

HTML:

 <img ng-src="{{src}}" imageonload />

Tôi đã sửa đổi điều này một chút để các $scopephương thức tùy chỉnh có thể được gọi:

<img ng-src="{{src}}" imageonload="doThis()" />

Chỉ thị:

.directive('imageonload', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    //call the function that was passed
                    scope.$apply(attrs.imageonload);
                });
            }
        };
    })

Hy vọng ai đó thấy nó RẤT hữu ích. Cảm ơn @mikach

Khi đó, doThis()hàm sẽ là một phương thức $ scope

@ Oleg Tikhonov: Vừa cập nhật mã trước .. @ mikach Cảm ơn ..)

app.directive('imageonload', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.bind('load', function() {
            alert('image is loaded');
        });
        element.bind('error', function(){
             alert('image could not be loaded');
        });
    }
  };
});

Câu trả lời của tôi:

 var img = new Image();
 var imgUrl = "path_to_image.jpg";
 img.src = imgUrl;
 img.onload = function () {
      $scope.pic = img.src;
 }

Vừa cập nhật mã trước ..

<img ng-src="{{urlImg}}" imageonload="myOnLoadImagenFunction">

và chỉ thị ...

    .directive('imageonload', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    scope.$apply(attrs.imageonload)(true);
                });
                element.bind('error', function(){
                  scope.$apply(attrs.imageonload)(false);
                });
            }
        };
    })

Về cơ bản, đây là giải pháp tôi đã sử dụng.

$ apply () chỉ nên được sử dụng bởi các nguồn bên ngoài trong những trường hợp thích hợp.

thay vì sử dụng áp dụng, tôi đã ném cập nhật phạm vi vào cuối ngăn xếp cuộc gọi. Hoạt động tốt như "scope. $ Apply (attrs.imageonload) (true);".

window.app.directive("onImageload", ["$timeout", function($timeout) {

    function timeOut(value, scope) {
        $timeout(function() {
            scope.imageLoaded = value;
        });
    }

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                timeOut(true, scope);
            }).bind('error', function() {
                timeOut(false, scope);
            });
        }
    };

}]);