Вложенные - включенные элементы - уточнение области применения?

Я уже знаю, как работает включение (думаю, только на первом уровне), но у меня есть вопрос о области действия вложенного включаемого элемента.

Итак, у меня есть этот код:

<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 включенные данные должны иметь доступ к внешней области действия директивы, которая является директивой 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 изменяет способ вложения областей. Это делает так, что содержимое включенной директивы имеет любую область вне директивы, а не ту область, которая находится внутри. При этом он предоставляет содержимому доступ к внешней области.

Но какую область действия имеет директива снаружи myPAne?

Другими словами, почему/как i=1000?

ПОЛНЫЙ ПЛАНКЕР

ИЗМЕНИТЬ ОТ OP ПОСЛЕ ОТВЕТА

После установки и настройки PeriScope (от @MarkRajcok) я теперь вижу это визуально:

введите здесь описание изображения


angularjs angularjs-ng-transclude
person Royi Namir    schedule 08.12.2015    source источник
comment
И myTab, и myPane имеют transclude: true. myPane вложен в myTab. Вы даете myPane область действия myTab, а затем myTab область действия ctrl, что дает myPane область действия ctrl.   -  person jperezov    schedule 08.12.2015

Ответы (1)


arrow_upward
1
arrow_downward

Из документации на $compile

Когда вы вызываете функцию включения, она возвращает фрагмент DOM, предварительно привязанный к области включения. Эта область действия особенная, поскольку она является потомком области действия директивы (и поэтому уничтожается при уничтожении области действия директивы), но наследует свойства области, из которой она была взята.

Родительская иерархия (от $$childTail) выглядит следующим образом:

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

Прототипная иерархия похожа (скриншот из AngularJS Batarang)-

ng-transclude прото-иерархия

Обновленный plunker с идентификатором области, напечатанным в консоли, должен дать вам лучшее представление.

Почему они разные, я не очень уверен. Кто-то может пролить свет на это.

Почему значение равно 1000. Это связано с тем, что i необходимо предоставить как двунаправленный атрибут =, чтобы дочерние области могли его изменить. Я обновил приведенный выше плункер, теперь вы можете видеть, что значение реагирует на изменение в контроллере pane.

Подробнее о включенных областях -
Запутался в включенных и изолированных областях Angularjs и привязки
https://github.com/angular/angular.js/wiki/Understanding-Scopes

person Aseem Gautam    schedule 08.12.2015
comment
Почему вы добавили i в изолированную область? В моем вопросе его не было. Также - в вашем плункере - не могли бы вы объяснить, что такое mypane parent 4 ? Я знаю, что и mytabs, и mypane имеют изолированную (разную) область. но что такое mypane parent 4? Что является родителем mypane ? - person Royi Namir; 08.12.2015
comment
Включенная область — это особая область. В приведенном выше случае - mypane parent 4 является включенной областью. Я обновил сообщение ссылкой, которая объясняет включенную область. - person Aseem Gautam; 08.12.2015
comment
Но в моем вопросе 2 включенных элемента, так почему я вижу только 4-й? - person Royi Namir; 08.12.2015
comment
Верно. На самом деле есть еще и 6-й прицел. Я обновил пост. 2 для директив, 2 включены, rootscope и ctrl. - person Aseem Gautam; 08.12.2015