Geek Answers Handbook

Nested - excluded items - clarification of the scope?

I already know how transcription works (on the first level, only I guess), bUt I have a question about the nested interception area.

So, I have this code:

<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>

Mostly I have controller , <my-tabs> and <my-pane > .

Looking at the myTabs directive:

  .directive('myTabs', function() { return { restrict: 'E', transclude: true, scope: {}, controller: ['$scope', function($scope) { $scope.i = 2; }], template: '<div ng-transclude></div>' }; })

I know that the contents of the directive will have access to the external scope

Thus, the yellow part will have access to the external area (which is the main area of ​​the controller):

enter image description here

Here is the code for the myPane directive:

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

The program begins with:

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

Program Output:

Hi, the value of "i" is = 1000

But

According to the documentation: myPane's transcluded data must have access to the external scope of the directive, which is the myTabs directive, which has the value i=2 .

But myPane has an isolated scope, so it does NOT inherit the scope from myTabs .

Question

Does it go one level more higher into the controller area to get i=1000 ? (Clarification, I do not ask how I can do i get a different value - I ask why / how it matters 1000).

I mean, what does the area hierarchy look like?

This is true?

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

the docs say:

The transclude parameter changes the way the areas are nested. This makes the contents of the transclosed directive have any scope outside the directive , and not any scope inside. This gives access to content for the outside area.

But what is the scope outside the myPane directive?

In other words, why / how i=1000 ?

FULL PLUNKER

CHANGE FROM AFTER RESPONSE

After installing and configuring PeriScope (from @MarkRajcok), I now see it visually:

enter image description here

+6
source share
1 answer

From documents on $ compile

When you call the transclude function, it returns a DOM fragment that is previously bound to the transclusion area. This area is special because it is a child of the scope (and therefore destroyed when the scope of the directive is destroyed), but inherits the properties of the volume from which it was taken.

Parent Hierarchy (from $$ childTail) is similar:

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

The prototype hierarchy is similar to (screenshot from AngularJS Batarang) -

ng-transclude proto hierarchy

Updated plunker with area id printed on console should give you a better idea.

Why they are different, I'm not very sure. Someone can shed light on this.

Why the value is 1000. Its value should be indicated as i as a bidirectional attribute = , so its child regions can modify it. I updated the aforementioned plunker, now you can see that the value is responding to a change in the pane controller.

More about translated areas -
Confused about Angularjs are encrypted and isolate areas and bindings
https://github.com/angular/angular.js/wiki/Understanding-Scopes

+1
source

More articles:


All Articles