嵌套 - 包含的项目 - 范围说明？

Question

我已经知道嵌入是如何工作的（我猜只在第一层），但我对嵌套嵌入项目的范围有疑问。

好的，我有这个代码：

<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>'
      };
  })

我知道指令 的内容可以访问 outer 指令的范围

所以黄色部分将可以访问外部作用域（这是主控制器作用域）：

这是 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;
})

程序的输出是：

Hello , The value of "i" is => 1000

但是

根据文档：myPane's 嵌入的数据应该可以访问指令的外部范围，即 myTabs 指令，其值为 i=2.

但是 myPane 有一个 isolated 作用域，所以它 NOT 继承了 myTabs 的作用域。

问题

那么它是不是为了获得 i=1000 而在控制器的作用域上更多一级？？ _{（澄清一下，我不是在问如何让 i 获得另一个值 - 我是在问 why/how 它的值为 1000）。}

我的意思是范围的层次结构在这里看起来如何？

是这样吗？

         controller's scope
                |
       +--------+---------+
       |                  |
  myTabs's             mypanes's
 transcluded           transcluded 
 data's scope          data's scope

文档说：

The transclude option changes the way scopes are nested. It makes it so that the contents of a transcluded directive have whatever scope is outside the directive, rather than whatever scope is on the inside. In doing so, it gives the contents access to the outside scope.

但是 myPAne 指令的外部范围是什么？

换句话说，为什么/如何i=1000?

FULL PLUNKER

回答后根据 OP 进行编辑

安装和配置 PeriScope（来自@MarkRajcok）后，我现在可以直观地看到它：

Answer 1

来自 $compile

上的文档

When you call a transclude function it returns a DOM fragment that is pre-bound to a transclusion scope. This scope is special, in that it is a child of the directive's scope (and so gets destroyed when the directive's scope gets destroyed) but it inherits the properties of the scope from which it was taken.

Parent 层次结构（来自 $$childTail）就像：

-1 (root)
--2 (ctrl)
---3 mytab
----4 ($$transcluded = true)
------5 mypane
--------6 ($$transcluded = true)

Prototypical Hierarchy 就像（来自 AngularJS Batarang 的屏幕截图）-

已更新 plunker，在控制台中打印范围 ID 应该会给您一个更好的主意。

为什么这些不同，我不是很确定。有人可以阐明这一点。

为什么值为1000。是因为i需要作为双向属性提供= 所以子作用域可以修改它。我已经更新了上面的 plunker，你现在可以看到值响应 pane 控制器中的变化。

更多关于嵌入范围的信息 -
Confused about Angularjs transcluded and isolate scopes & bindings
https://github.com/angular/angular.js/wiki/Understanding-Scopes

嵌套 - 包含的项目 - 范围说明？

Nested - transcluded items - scope clarification?

angularjs

angularjs-ng-transclude