다음 지침을 고려하십시오.
.directive('otherDirective', function(){
return {
link: function(scope, elem, attr){
console.log(elem[0]);
alert(elem[0]);
}
}
ng-repeat 태그에 적용하면 ng-repeat가 끝날 때까지 {{item}}이 평가되지 않음을 알 수 있습니다 (으로 차단 될 때 alert()
). 각 "루프"후에 어떻게 렌더링 할 수 있습니까?
실제 시나리오에서는 해당 항목에 이미지가 포함되어 있고 각 이미지가로드 된 후 콜백을 수행하고 싶지만 img URL이 없으면 이벤트를 바인딩 할 수 없습니다.
ng-repeat
범위 변수 를 통해 img src를 할당하고 있다고 생각합니다 {{x}}
. 이 경우 onload
이미지 요소가로드 될 때까지 정말로 관심이 있다면 이벤트 를 넣을 수 있습니다. on('load', funnction(){ //code })
이벤트 를 사용하는 것이 좋습니다 . 이 이벤트는 이미지가 DOM에로드 될 때마다 함수를 호출합니다.
암호
.directive('otherDirective', function() {
return {
link: function(scope, elem, attr) {
//element before loading
console.log(elem[0]);
elem.find('img').on('load', function() {
//element after loaded
console.log(elem[0]);
//if you are going to manipulate scope binding here
//then you have to run digest cycle manually
//as this event will considered as outside of angular context
//after binding/DOM manipulation is done..do apply digest by doing scope.$apply()
})
}
}
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다