Angular의 ng-src에 대한 이미지 로드 이벤트JS

Angular의 ng-src에 대한 이미지 로드 이벤트JS

제 이미지는 다음과 같습니다.<img ng-src="dynamically inserted url"/>하나의 이미지가 로드되면 iScroll refresh() 메서드를 적용하여 이미지를 스크롤할 수 있도록 해야 합니다.

콜백을 실행하기 위해 이미지가 완전히 로드되었을 때 알 수 있는 가장 좋은 방법은 무엇입니까?

다음으로 이미지 onload 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 />

커스텀이 되도록 조금 수정했습니다.$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()그러면 함수는 $dispony 메서드가 됩니다.

@ Oleg Tikhonov : 이전 코드를 갱신했습니다.@ mikach 고마워..)

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

답변:

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

이전 코드를 업데이트했습니다.

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

기본적으로 이것이 제가 사용하게 된 해결책입니다.

$syslog()는 적절한 상황에서 외부 소스에서만 사용해야 합니다.

적용하지 않고 콜스택의 끝에 스코프 갱신을 송신했습니다.'scope'만큼 잘 작동합니다.$syslog(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);
            });
        }
    };

}]);

언급URL : https://stackoverflow.com/questions/17884399/image-loaded-event-in-for-ng-src-in-angularjs