棱角划分和范围:为什么这不起作用?
-
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
跨扫描本身正在运行,但是只能在指令的模板中替换为{{title}}
。
然而,跨分组元素内的{{title}}
即使指令在其范围内具有变量生成的变量title
,也会留空。为什么?
解决方案
跨分支元素的范围不是指令的子范围,而是一个兄弟姐妹。这是文件所说的:
在典型的设置中,窗口小部件创建了隔离范围,但跨扫描不是一个孩子,而是孤立范围的兄弟姐妹。
在这种情况下最简单的解决方案如何访问已超额范围:
.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;
}
};
});
.
演示: http://plnkr.co/edit/ouq9b4f2qfph557708q1?p= preview
其他提示
@dfsq是正确的:
跨分子元素的范围不是子范围 指令,但兄弟姐妹
我想添加更多的评论为什么这是Angularjs的预期行为。由于Docs说:
在典型的设置中,窗口小部件创建了隔离范围,但是 转速不是孩子,而是孤立范围的兄弟姐妹。这 使小部件成为可能具有私有状态,以及 转移到父母(预隔离)范围的结合。
指令内的跨分支内容是任意的,它不应该有关于指令的隔离范围的了解,否则,我们将创建一个紧密耦合代码。因为对于丢弃的内容工作,内容必须知道指令的实现细节(可用于使用的内容)。
如果您决定内容属于指令。你有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)使用自定义旋转来绑定scope:
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
});
}
};
});
.
不隶属于 StackOverflow