Nidificato - elementi esclusi - chiarimento dell'ambito?

So già come funziona la transclusione (solo nel primo livello credo), ma ho una domanda sull'ambito dell'elemento nidificato escluso.Nidificato - elementi esclusi - chiarimento dell'ambito?

Ok quindi non ho questo codice:

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

Fondamentalmente ho un controller, <my-tabs> e <my-pane >.

Guardando myTabs direttiva:

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

So che il contenuto della direttiva avrà accesso al campo di applicazione esterna della direttiva

Quindi la parte gialla avrà accesso al esterno scope (che è l'ambito del controller principale):

Qui è il codice per myPane direttiva:

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

Il programma inizia con:

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

L'output del programma è:

Ciao, Il valore di "i "è => 1000

Secondo la documentazione: myPane's dati transclusa dovrebbero avere accesso al campo di applicazione esterna della direttiva, che è myTabs direttiva che ha il valore i=2.

Ma myPane ha un isolato ambito così fa NON ereditano il campo da myTabs.

Domanda

così essa va un livello più superiore alla portata del controller al fine di ottenere i=1000 ?? _{(Chiarimento, non sto chiedendo come posso fare in modo che i ottenga un altro valore - sto chiedendo perché/come ha il valore di 1000).}

Voglio dire come appare la gerarchia di scopo qui?

È così?

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

la documentazione dice:

L'opzione transclude cambia il modo in ambiti sono annidati. Lo rende in modo che il contenuto di una direttiva transclusa abbia qualsiasi ambito sia al di fuori della direttiva, piuttosto che qualsiasi ambito è all'interno. In così facendo, dà ai contenuti l'accesso all'ambito esterno.

Ma quale ambito ha l'esterno della direttiva myPAne?

In altre parole, perché/come fa i=1000?

FULL PLUNKER

EDIT FROM OP dopo la risposta

volta installato e configurato Periscope (da @MarkRajcok) posso ora vedere visivamente:

fonte

2015-12-08 Royi Namir

Sia mytab e myPane hanno 'transclude: true'. myPane è annidato all'interno di myTab. Stai dando a myPane l'ambito di myTab e poi myTab l'ambito di ctrl, che dà a myPane l'ambito di ctrl. – jperezov

Dalla documentazione su $compile

Quando si chiama una funzione di transizione, viene restituito un frammento DOM che è associato a un ambito di transclusione. Questo ambito è speciale, in quanto è figlio dell'ambito della direttiva (e quindi viene distrutto quando l'ambito della direttiva viene distrutto) ma eredita le proprietà di l'ambito da cui è stato tratto.

Parent Gerarchia (da $$ childTail) è simile:

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

Prototypical Gerarchia è come (screenshot da AngularJS Batarang) -

Aggiornato plunker con l'id dello strumento stampato nella console dovrebbe darti una scommessa idea.

Perché questi sono diversi, non sono molto sicuro. Qualcuno può far luce su questo.

Perché il valore è 1000. Il suo perché i deve essere fornito come un bidirezionale attributo = così gli scopi figlio possono modificarlo. Ho aggiornato il plunker di cui sopra, è possibile vedere ora il valore risponde al cambiamento nel controller pane.

Maggiori info su ambiti transclusa -
Confused about Angularjs transcluded and isolate scopes & bindings
https://github.com/angular/angular.js/wiki/Understanding-Scopes

fonte

2015-12-08 18:32:30

Perché hai aggiunto i all'ambito isolato? La mia domanda non ce l'ha. Inoltre, nel tuo plunker, puoi spiegare cosa è "mypane parent 4"? So che sia mytabs che mypane hanno uno scopo (diverso) isolato. ma che cosa è "genitore mypane 4"? Qual è il genitore di mypane? –

L'ambito escluso è un ambito speciale. Nel caso precedente - 'genitore mypane 4 'è l'ambito transcluso. Ho aggiornato il post con un link che spiega l'ambito transcluso. –

Ma la mia domanda ha 2 oggetti transclusi, quindi perché vedo solo il 4 °? –

Nidificato - elementi esclusi - chiarimento dell'ambito?

risposta

Problemi correlati