AngularJS - 이미지 "다운로드" 이벤트
간단하지만 사소하지 않은 질문에 대한 답을 찾고 있습니다.이미지를 포착하는 올바른 방법은 무엇입니까?onload
jqLite를 사용하는 경우에만 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
'programing' 카테고리의 다른 글
Wordpress에서 만든 모든 데이터베이스 쿼리를 표시하는 방법 (0) | 2023.03.01 |
---|---|
교차 도메인(하위 도메인) 에이잭스 요청에 대한 질문 (0) | 2023.03.01 |
Angular에서의 양방향 데이터 바인딩JS 디렉티브 (0) | 2023.03.01 |
Go에서 JSON을 구문 분석할 때 기본값을 지정하는 방법 (0) | 2023.02.24 |
선택 옵션에 대한 값 속성을 설정하려면 어떻게 해야 합니까? (0) | 2023.02.24 |