嵌套 - 被抄送的项目 - 范围澄清？
Roy*_*mir 6 angularjs angularjs-ng-transclude
我已经知道transclusion是如何工作的(仅在第一级我猜),我对嵌套的transcluded项的范围有疑问.
好的,我有这个代码:
<body ng-app="docsTabsExample" ng-controller="ctrl">
<my-tabs>
<my-pane title="Hello">
<h4>Hello , The value of "i" is => {{i}}</h4>
</my-pane>
</my-tabs>
</body>
基本上我有一个controller,<my-tabs>和<my-pane >.
看myTabs指令:
.directive('myTabs', function()
{
return {
restrict: 'E',
transclude: true,
scope:
{},
controller: ['$scope', function($scope)
{
$scope.i = 2;
}],
template: '<div ng-transclude></div>'
};
})
我知道该指令的内容可以访问外部指令的范围
因此黄色部分将可以访问外部作用域(这是主控制器作用域):
这是myPane指令的代码:
.directive('myPane', function()
{
return {
require: '^myTabs',
restrict: 'E',
transclude: true,
scope:
{
},
controller: function($scope)
{
$scope.i = 4; //different value
},
template: '<div ng-transclude></div>'
};
})
该计划始于:
.controller('ctrl', function($scope)
{
$scope.i = 1000;
})
该计划的输出是:
您好,"i"的值=> 1000
但
根据文档:myPane'stranscluded数据应该可以访问指令的外部范围,该指令是myTabs具有该值的指令i=2.
但是myPane有一个隔离的范围,以便它不是继承的范围myTabs.
题
所以,做它去一个水平更加高到控制器的范围,以获得i=1000？(澄清,我不是在问我怎样才能i获得另一个价值 - 我在问为什么/它如何具有1000的价值).
我的意思是范围的层次结构在这里看起来如何？
是这样的吗？
controller's scope
|
+--------+---------+
| |
myTabs's mypanes's
transcluded transcluded
data's scope data's scope
文档说:
transclude选项更改范围嵌套的方式.它使得transcluded指令的内容具有指令之外的任何范围,而不是内部的任何范围.这样做,它使内容访问外部范围.
但是myPAne指令的范围有多大？
换句话说,为什么/ 怎么样呢i=1000？
在回答后编辑OP
安装和配置PeriScope后(来自@MarkRajcok)我现在可以直观地看到它:
来自$compile上的文档
当您调用嵌入函数时，它会返回一个预先绑定到嵌入范围的 DOM 片段。该作用域很特殊，因为它是指令作用域的子级（因此当指令作用域被破坏时也会被破坏），但它继承了从中获取它的作用域的属性。
父层次结构（来自 $$childTail）如下：
-1 (root)
--2 (ctrl)
---3 mytab
----4 ($$transcluded = true)
------5 mypane
--------6 ($$transcluded = true)
原型层次结构就像（来自 AngularJS Batarang 的屏幕截图）-
更新后的punker与控制台中打印的范围 id 应该会给您一个更好的主意。
为什么这些不同，我不太确定。有人可以阐明这一点。
为什么值是 1000。这是因为i需要作为双向属性提供=以便子作用域可以修改它。我已经更新了上面的插件，您现在可以看到该值响应pane控制器中的更改。
有关嵌入范围的更多信息 -
对 Angularjs 嵌入和隔离范围和绑定感到困惑
https://github.com/angular/angular.js/wiki/Understanding-Scopes
| 归档时间： |
|
| 查看次数： |
249 次 |
| 最近记录： |