6

トランスクルージョンがどのように機能するかは既に知っています (最初のレベル内のみだと思います) が、ネストされたトランスクルージョン項目の範囲について質問があります。

わかりましたので、私はこのコードを持っています:

<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'sであるディレクティブの外側のスコープにアクセスできる必要があります。myTabsi=2

ただし、スコープがmyPane分離されているため、 からスコープを継承しませんmyTabs。

質問

それで、取得するためにコントローラーのスコープの1レベル上に移動しますi=1000か?? （明確化、別の値を取得する方法を尋ねているのではありませんi-なぜ/どのように値が1000になっているのかを尋ねています）。

つまり、スコープの階層はここでどのように見えるのでしょうか?

こんな感じですか？

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

ドキュメントは言う：

transclude オプションは、スコープがネストされる方法を変更します。トランスクルードされたディレクティブの内容が、内部にあるスコープではなく、ディレクティブの外側にあるスコープを持つようにします。そうすることで、内容がスコープ外にアクセスできるようになります。

myPAneしかし、outside ofディレクティブにはどのようなスコープがありますか?

言い換えれば、なぜ/どのようにi=1000？

フルプランカー

回答後に OP から編集

PeriScope (@MarkRajcok から) をインストールして構成した後、視覚的に確認できるようになりました。

ここに画像の説明を入力

4

1 に答える 1

1

$compileのドキュメントから

transclude 関数を呼び出すと、transclusion スコープに事前にバインドされた DOM フラグメントが返されます。このスコープは、ディレクティブのスコープの子である (したがって、ディレクティブのスコープが破棄されると破棄される) という点で特別ですが、取得元のスコープのプロパティを継承します。

親階層 ($$childTail から) は次のようになります。

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

プロトタイプ階層は (AngularJS Batarang からのスクリーンショット) のようなものです-

ng-transclude プロト階層

スコープ ID がコンソールに出力された更新されたplunkerは、より良いアイデアを提供するはずです。

なぜこれらが異なるのか、よくわかりません。誰かがこれに光を当てることができます。

値が 1000 である理由。これは、iを双方向属性として提供する必要があるためです=子スコープがそれを変更できるようにします。上記のプランカーを更新しました。値がpaneコントローラーの変更に応答するようになりました。

トランスクルードされたスコープの詳細 -
Angularjs のトランスクルードについて混乱し、スコープとバインディングを分離する
https://github.com/angular/angular.js/wiki/Understanding-Scopes

于 2015-12-08T18:32:30.453 に答える