중첩 된 콘텐츠를 포함하는 내 사용자 지정 지시문 내에서 사용되는 ng-repeat 지시문에 대한 초기 html 템플릿을 얻으려고합니다. 그러나 대신 지시문 내부에 설정된 실제 html 텍스트는 이미 컴파일 된 ng-repeat 지시문 또는 다음과 같은 주석을 얻습니다.
<!-- ngRepeat: item in items -->
나는 이미 github 에서 그 질문을 던졌지 만 불행히도 대답이 명확하지 않았습니다. 컴파일되기 전에 ng-repeat 지시문 템플릿을 얻는 방법이 있습니까?
다음은 내가 달성하려는 간단한 예입니다 (및 plnkr ).
app.directive('parent', function() {
return {
restrict:'E',
template:'<div ng-transclude></div>',
transclude: true,
priority: 1001,
scope: true,
compile: function(element, attrs) {
console.log(element.html());
console.log(element);
}
};
});
<parent>
<div ng-repeat="item in items">
{{item}}
</div>
</parent>
ng-repeat 디렉티브에는`transclude : "element"가 있으므로 컴파일 될 때 전체 요소가 DOM에서 꺼내지고 (교체 준비 과정에서) 주석이 남습니다.
따라서 첫 번째 사람 console.log(element.html())은 자신의 지시에 대한 초월이 일어나지 않았기 때문에 아무것도 볼 수 없습니다.
그러나 링크 타임에 내부 HTML을 살펴 보더라도 ngRepeat는 컴파일되었지만 아직 그 초월은 일어나지 않을 것입니다. 이 때, 나중에 발생 scope.$watchCollection의 ngRepeat화재.
따라서 콘텐츠를 보는 유일한 방법은 ngRepeat. parent지시문을 만들고 terminal: true내용을 검사 한 다음 수동으로 다시 컴파일 할 수 있습니다.
우선 순위가 더 높은 반복 가능한 요소에서 실행되는 지시문을 추가 ngRepeat하고 내용을 가져올 수도 있습니다.
( "ngRepeat"이름을 재사용 할 수도 있습니다 )
app.directive("ngRepeat", function(){
return {
require: "?^parent", // optionally require your parent
priority: 1010,
compile: function(tElem){
var template = tElem.html();
return function link(scope, element, attrs, ctrls){
var parentCtrl = ctrls;
if (!parentCtrl) return;
// hand it off to the parent controller
parentCtrl.setTemplate(template);
}
}
}
})
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다