중첩된 Angular 지시문의 이상한 동작
-
20-12-2019 - |
문제
다른 지시어 내에서 내 지시어를 사용하고 싶습니다.다음 예는 너무 이상한 결과를 보여서 포기하고 이 질문을 해야 했습니다.여기서 무슨 일이 일어나고 있는지 누군가가 나에게 설명해주기를 바랍니다.
var app = angular.module('blah', []);
app.directive('one', function() {
return {
restrict: 'E',
replace: true,
template: '<outer>one</outer>'
};
});
app.directive('two', function() {
return {
restrict: 'E',
replace: true,
template: '<outer>two</outer>'
};
});
app.directive('outer', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div ng-transclude></div>'
};
});
HTML:
<outer>whatever</outer>
<one></one>
<two></two>
<outer>something</outer>
결과 DOM은 다음과 같습니다.
<div ng-transclude=""></div>
<outer></outer>
<two></two>
<outer>something</outer>
JSFiddle: http://jsfiddle.net/WPpUL/
버그인가요?
편집하다:
예상 출력 DOM:
<div ng-transclude>whatever</div>
<div ng-transclude>one</div>
<div ng-transclude>two</div>
<div ng-transclude>something</div>
해결책
사용하는 대신 replace
우리는 그것을 수동으로 할 것입니다. 이것은 각도를 행복하게 유지하고 필요한 것을 얻는 것 같습니다.
1) 세트 replace: false
One과 Two에서는 사실이 아닙니다.(Angular를 행복하게 만들기)
2) 이 링크 기능을 사용하여 html을 One과 Two로 수동으로 바꿉니다.
link: function(scope, element, attrs) {
element.replaceWith(element.html());
}
결과는 다음과 같습니다.
<div ng-transclude=""><b class="ng-scope">whatever</b></div>
<div ng-transclude=""><b class="ng-scope">one</b></div>
<div ng-transclude=""><b class="ng-scope">two</b></div>
<div ng-transclude=""><b class="ng-scope">something</b></div>
텍스트 노드를 제거하기 위해 B 태그로 둘러싸여 있습니다. 자동으로 생성된 SPAN.
업데이트된 바이올린은 다음과 같습니다. http://jsfiddle.net/WPpUL/7/
다른 팁
루트 요소가있는 템플릿을 랩핑하면 문제가 해결됩니다.
template: '<div><outer>one</outer></div>'
template: '<div><outer>two</outer></div>'
. 제휴하지 않습니다 StackOverflow