AngularJS中ng-src中的图像加载事件

Question

我有看起来像的图片<img ng-src="dynamically inserted url"/>。加载单个图像时，我需要应用iScroll refresh（）方法以使图像可滚动。知道何时完全加载映像以运行某些回调的最佳方法是什么？

Answer 1

我对此做了一些修改，以便$scope可以调用自定义方法：

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

指令：

.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);

                });

            }

        };

    })

希望有人觉得它非常有用。

该doThis()函数将是$ scope方法

Answer 2

刚刚更新了以前的代码。

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

和指示...

    .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);

                });

            }

        };

    })