嵌套 - 透明物品 - 範圍澄清？

我已經知道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指令代碼：

.controller('ctrl', function($scope) 
{ 
    $scope.i = 1000; 
})

程序的輸出是：

.directive('myPane', function() 
    { 
     return { 
      require: '^myTabs', 
      restrict: 'E', 
      transclude: true, 
      scope: 
      { 
      }, 
      controller: function($scope) 
      { 
       $scope.i = 4; //different value 
      }, 
      template: '<div ng-transclude></div>' 
     }; 
    })

該程序將啓動

你好，的「我的價值「is => 1000

但

根據文檔：myPane's transcluded數據應該可以訪問哪些是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？

FULL PLUNKER

編輯從OP的答案後

安裝和配置潛望鏡（從@MarkRajcok）後，現在我可以看到它在視覺上：

來源

2015-12-08 Royi Namir

兩個MYTAB和myPane有'transclude：TRUE'。 myPane嵌套在myTab中。你給myPane myTab的範圍，然後myTab是ctrl的範圍，這給了myPane ctrl的範圍。 – jperezov

從上Docs $compile

當您調用transclude函數時，它將返回一個預先綁定到一個包含範圍的的DOM片段。這個範圍是特殊的，因爲它是是指令作用域的子節點（因此當指令的作用域被銷燬時會被銷燬），但它繼承了從中獲取它的範圍的屬性。

父層次（從$$ childTail）是這樣的：

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

原型層次是像（截圖從AngularJS Batarang） -

更新plunker與範圍編號打印在控制檯應該給你一個賭注這個想法。

爲什麼這些不同，我不是很確定。有人可以對此發出光芒。

爲什麼值爲1000。其因我需要爲雙向屬性=提供這樣子作用域可以對其進行修改。我已經更新了上面的調度器，你可以看到現在的值響應在pane控制器中的變化。

來源

2015-12-08 18:32:30

爲什麼你把我添加到隔離範圍？我的問題沒有。另外 - 在你的運動員 - 你能解釋什麼是「mypane父母4」？我知道mytabs和mypane都有單獨的（不同的）範圍。但什麼是「mypane父母4」？什麼是mypane的父母？ –

Transcluded範圍是一個特殊的範圍。在上面的情況中，「mypane parent 4」是transcluded範圍。我已經用一個解釋transcluded作用域的鏈接更新了這篇文章。 –

但是我的問題有兩個橫貫的項目，所以爲什麼我只看到第四個？ –

嵌套 - 透明物品 - 範圍澄清？

回答

相關問題