javascript - AngularJS の ng-src のイメージ読み込みイベント

Question

のような画像があります<img ng-src="dynamically inserted url"/>。単一の画像が読み込まれると、iScroll の refresh() メソッドを適用して、画像をスクロール可能にする必要があります。

コールバックを実行するために画像が完全にロードされたことを知る最良の方法は何ですか?

Answer 1

画像のオンロードを呼び出す方法の例を次に示しますhttp://jsfiddle.net/2CsfZ/2/

基本的な考え方は、ディレクティブを作成し、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 />

Answer 2

$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);
                });
            }
        };
    })

誰かがそれが非常に役立つことを願っています。ありがとう @mikach

doThis()関数は $scope メソッドになります

Answer 3

以前のコードを更新したところ..

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

Answer 4

基本的に、これは私が最終的に使用したソリューションです。

$apply() は、適切な状況で外部ソースによってのみ使用されるべきです。

apply を使用するのではなく、スコープの更新をコール スタックの最後にスローしました。「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);
            });
        }
    };

}]);