AngularJS: come si possono escludere più direttive?

Question

(1) Ho una direttiva transitoria denominata portlet che prende il suo contenuto e lo avvolge in un codice di codice. Ad esempio:

<portlet> 
    <div class="foobar">My content</div> 
</portlet> 

passa attraverso il modello di portlet, che è:

<div class="portlet"> 
    <div class="icon"></div> 
    <div class="content" ng-transclude="">   
    </div> 
</div> 

E diventa:

<div class="portlet"> 
    <div class="icon"></div> 
    <div class="content"> 
     <div class="foobar">My content</div> <!--the original content 
             passed to portlet--> 
    </div> 

(2) Ho altre due direttive, dyn-form e dyn-form-field . Descritto in questo modo:

<dyn-form> 
    <dyn-form-field type="textbox" placeholder="..." label="Name" /> 
    <! ...and so on... --> 
</dyn> 

dyn-form 's template:

<form class="..." ng-transclude=""> 
</form> 

Ogni dyn-field' s template genera il codice HTML per produrre l'etichetta/campi per esso. Così il codice originale è tradotto in qualcosa di simile a questo:

<form class="..."> 
    <label>Name: <input type="text" placeholder="..." /></label> 
    <!- ....and so on... --> 
</form> 

(3) Ecco il problema. Voglio utilizzare una terza direttiva, dyn-form-portlet per la generazione del codice boilerplate per la visualizzazione di alcuni pulsanti mostrati sopra ogni modulo, quindi mostrare un portlet e inserire dyn-form all'interno del portlet. Questo è il modo che sto cercando di fare questo:

modello

<dyn-form-portlet> 
    <dyn-form> 
    <dyn-form-field /> 
    </dyn-form> 
</dyn-form-portlet> 

s' dyn-form-portlet si presenta così:

<div class="dyn-form-portlet"> 
    <button>Foo</button> 
    <button>Bar</button> 
    <portlet ng-transclude=""> 
    </portlet> 
</div>  

Teoricamente questo dovrebbe funzionare, cioè <dyn-form> deve essere posto all'interno <portlet>, <dyn-form-field> s all'interno <dyn-form> , e così via. Ma quando eseguo questo, vedo solo i pulsanti visualizzati da dyn-form-portlet e il codice per portlet, ma portlet è vuoto e il modulo non viene visualizzato in esso.

Sto facendo qualcosa di sbagliato, o si tratta di un bug?

Answer 1

Sono riuscito a risolvere il problema. Ho usato transclude : 'element' insieme a replace : true sulla direttiva portlet e l'ho dato a priority più alto di altre direttive. Il motivo per cui l'ho fatto è piuttosto la sensazione di una profonda conoscenza dei meccanismi interiori di Anuglar.

chi prima parte transclude : 'element' viene utilizzato perché

'elemento' - transclude l'intero elemento incluse le direttive definite a priorità inferiore.

Sostituisci è utilizzato perché da quello che ho visto viene sempre utilizzato quando transclude è impostato su elemento. La priorità era la mia impressione.

Ecco la plnkr http://plnkr.co/edit/axQ90dHOLmLNeNQ4ZlNl?p=preview

Questo probabilmente non è la risposta che stavate cercando, ma avrebbe bisogno di guardare in profondità in direttive angolari per capire veramente cosa sta succedendo. Ad ogni modo, non è un bug, è solo una scarsa documentazione.