Transclusion和角范围:这是为什么不工作? [英] Transclusion and scopes in angular: Why is this not working?
问题描述
我有一个非常简单的设置:
I have a very simple setup:
<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元素保持为空,即使指令有一个变量标题
在其范围内。这是为什么?
The transclusion itself is working but the {{title}}
only gets replaced in the directive's template.
The {{title}}
inside the transcluded element however stays empty even though the directive has a variable title
in its scope. Why is that?
推荐答案
transcluded元素的范围不指令但同级一个的子范围。这就是文档说:
The scope of the transcluded element is not a child scope of the directive but a sibling one. This is what documentation says:
在一个典型的设置窗口小部件创建一个分离的范围,但transclusion不是一个孩子,而是分离范围的兄弟。
In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope.
在这种情况下,您如何访问transcuded范围最简单的办法是这样的:
The simplest solution in this case how you can access transcuded scope is like this:
.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;
}
};
});
这篇关于Transclusion和角范围:这是为什么不工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!