AngularJS - 이미지 "다운로드" 이벤트

AngularJS - 이미지 "다운로드" 이벤트

간단하지만 사소하지 않은 질문에 대한 답을 찾고 있습니다.이미지를 포착하는 올바른 방법은 무엇입니까?onloadjqLite를 사용하는 경우에만 Angular에서 이벤트가 발생합니까?나는 이 질문을 찾았지만, 나는 지침과 함께 해결책을 원한다.
말씀드렸듯이, 이것은 저에게 받아들여지지 않습니다.

.controller("MyCtrl", function($scope){
    // ...
    img.onload = function () {
        // ...
    }

명령어가 아니라 컨트롤러에 있기 때문입니다.

다음은 Angular에 내장된 이벤트 처리 지침 스타일로 재사용 가능한 지침입니다.

angular.module('sbLoad', [])

  .directive('sbLoad', ['$parse', function ($parse) {
    return {
      restrict: 'A',
      link: function (scope, elem, attrs) {
        var fn = $parse(attrs.sbLoad);
        elem.on('load', function (event) {
          scope.$apply(function() {
            fn(scope, { $event: event });
          });
        });
      }
    };
  }]);

img 부하 이벤트가 발생하면 sb-load 속성의 식은 부하 이벤트와 함께 현재 범위에서 평가되며 $event로 전달됩니다.사용 방법은 다음과 같습니다.

HTML

<div ng-controller="MyCtrl">
  <img sb-load="onImgLoad($event)">
</div>

JS

  .controller("MyCtrl", function($scope){
    // ...
    $scope.onImgLoad = function (event) {
        // ...
    }

주의: "sb"는 커스텀 디렉티브에 사용하는 프레픽스입니다.

네, jqLite 메서드가 잘 작동합니다.그건 이런 식이다:

directive' 이름을 속성으로 추가하고 있습니다.img태그. 내 경우 로드 후 치수에 따라 이미지는 클래스 이름을 "수평"에서 "수직"으로 변경해야 합니다. 따라서 디렉티브의 이름은 "방향성"이 됩니다.

<img ng-src="image_path.jpg" class="horizontal" orientable />

그런 다음 다음과 같은 간단한 지시문을 작성합니다.

var app = angular.module('myApp',[]);

app.directive('orientable', function () {       
    return {
        link: function(scope, element, attrs) {   

            element.bind("load" , function(e){ 

                // success, "onload" catched
                // now we can do specific stuff:

                if(this.naturalHeight > this.naturalWidth){
                    this.className = "vertical";
                }
            });
        }
    }
});

예(명시적인 그래픽스!):http://jsfiddle.net/5nZYZ/63/

AngularJS V1.7.3 추가ng-on-xxx지시:

<div ng-controller="MyCtrl">
  <img ng-on-load="onImgLoad($event)">
</div>

AngularJS는 다음과 같은 많은 이벤트에 대한 특정 지침을 제공합니다.ngClick따라서 대부분의 경우 를 사용할 필요가 없습니다.ngOn. 단, AngularJS가 모든 이벤트를 지원하는 것은 아니며 이후 DOM 표준에 새로운 이벤트가 도입될 수 있습니다.

자세한 내용은 각도를 참조하십시오.JS ng-on Directive API 참조.

언급URL : https://stackoverflow.com/questions/17547917/angularjs-image-onload-event