Transclusion 및 범위에서 각:왜 이 작동하지 않습니까?
-
21-12-2019 - |
문제
나는 아주 간단한 설치:
<pane title="mytitle">Title in parent (transcluded): {{title}}</pane>
고
angular.module('transclude', [])
.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div>' +
'<div>Title in isolated scope: {{title}}</div>' +
'<div ng-transclude></div>' +
'</div>'
};
});
이 plunker 여기에 있습니다: http://plnkr.co/edit/yRHcNGjQAq1NHDTuwXku
이 transclusion 자체가 작동하지만 이 {{title}}
단체에 지시어의 템플릿입니다.
이 {{title}}
내부 transcluded 요소가 그러나 유지 빈도는 지시어는 변수 title
그것의 범위에서.그 이유는 무엇입니까?
해결책
의 범위 transcluded 요소는 것은 아이의 범위 지시어지만 형제 중 하나.이것은 문서를 말한다:
에는 전형적인 설정을 위젯 만들어 분리 범위이지만,transclusion 되지 않은 아이지만,형제자매의 격리 범위가 있습니다.
가장 간단한 솔루션이 이 경우에는 어떻게 액세스할 수 있습니다 transcuded 범위는 다음과 같습니다:
.directive('pane', function () {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
template:
'<div>' +
'<div>Title in isolated scope: {{title}}</div>' +
'<div ng-transclude></div>' +
'</div>',
link: function (scope, element, attrs) {
scope.$$nextSibling.title = attrs.title;
}
};
});
Demo: http://plnkr.co/edit/ouq9B4F2qFPh557708Q1?p=preview
다른 팁
@dfsq 이 올바른지에 대한:
의 범위 transcluded 요소는 것은 아이의 범위 지시어지만 형제 중 하나
나는 더 추가하고 싶어 의견이 왜 이것이 예상되는 행동의련.으로 문서를 말한다:
에는 전형적인 설정을 위젯 만들어 분리 범위하지만, transclusion 되지 않은 아이지만,형제자매의 격리 범위가 있습니다.이 그것은 가능한 위젯을 개인 상태,그리고 transclusion 수밖에 없는 부모(사전 분리)범위가 있습니다.
이 transcluded 콘텐츠 안에 지시어는 임의로,그것은 지 에 대한 지식이 있은 지시어의 격리 범위,그렇지 않으면,우리는 것 만들기 밀결 코드.기 때문에 transcluded 내용,작동하는 콘텐츠를 알고 있어야합 구현 정보의 directive(사용할 수 있는 것을 포함)를 사용합니다.
당신이 결정하는 경우 컨텐츠 그리고 하는 지시어.당신은 2 가지 옵션이 있습니다:
1)콘텐츠의 일부 템플릿
angular.module('transclude', [])
.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div>' +
'<div>Title in isolated scope: {{title}}</div>' +
'<div>' +
' Title in parent (transcluded): {{title}} ' +
' </div>' +
'</div>'
};
});
2)사용자 tranclusion 바인딩하는 범위:자신
angular.module('transclude', [])
.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div>' +
'<div>Title in isolated scope: {{title}}</div>' +
'<div class="transclude"></div>' +
'</div>',
link: function (scope, element, attr,controller, linker) {
linker(scope, function(clone){
element.find(".transclude").append(clone); // add to DOM
});
}
};
});