transclusion multilivello in angolare 1.5

Ho un generico direttiva <item>, e una direttiva <listing> con filtri e strumenti di impaginazione della messa in vendita che <item>:transclusion multilivello in angolare 1.5

Esempio: https://plnkr.co/edit/r6byzhFX5m674ONhH1JS?p=preview

Il modello <listing> è qualcosa del genere:

<div ng-repeat="item in items"> 
    <item date="item"> 
     <ng-transclude ng-transclude-slot="itemContent"></ng-transclude> 
    </item> 
</div>

La direttiva <item> utilizza il nuovo angolare 1.5 multi-slot inclusione per personalizzare piè di pagina e intestazione facilmente:

<item data="itemData"> 
    <header>My header</header> 
    <footer>My custom footer</footer> 
</item>

Il mio problema si pone quando cerco di personalizzare gli elementi che quando si utilizza <listing>. Se uso qualcosa di simile:

<listing items="myItems"> 
    <item-content> 
     <header>{{ item.name }}</header> 
     <footer>My custom footer for {{ item.name }}</footer> 
    </item-content> 
</listing>

Non funziona, perché il <item-content> viene inserito in <item>, ma <header> e <footer> non ottenere transclusa nei loro posto, e non in grado di leggere la variabile item ambito . C'è un modo per raggiungere questo obiettivo?

fonte

2016-02-10 Javier Marín

Puoi creare un plnker o un violino per questo? Vorrei approfondire questo problema un po 'di più. – Beyers

Eccolo: https://plnkr.co/edit/r6byzhFX5m674ONhH1JS?p=preview –

Per quanto posso vedere, quello che stai cercando di fare non funzionerà. In base alla progettazione, trascludi le modifiche nel modo in cui gli ambiti sono nidificati. Rende in modo che il contenuto di una direttiva transclusa abbia tutto l'ambito al di fuori della direttiva, piuttosto che qualsiasi ambito sia all'interno. Fornisce ai contenuti l'accesso all'ambito esterno. Quindi nel tuo esempio il contenuto escluso all'interno di '' e '' accede all'ambito del controller.Potrebbe esserci un modo per aggirare questo usando il parametro 'transcludeFn' di' link'. Ma non sono sicuro di come 'transcludeFn' funzioni con la funzione multi-slot. – Beyers

Innanzitutto, nel modello di inserzione è necessario modificare ng-transclude-slot="itemHeader" per ng-transclude="itemHeader" e ng-transclude-slot="itemFooter" entro il ng-transclude="itemFooter" per far funzionare la transazione.

Quindi, nell'esempio singolo e nell'elenco, si è verificato un errore. Se si modifica il plunkr fornito {items[0].name} dal previsto {data.name} nell'esempio singolo, si vedrà che il nome non viene più visualizzato. La seconda cosa da fare è risolvere questo problema condiviso.

fonte

2016-02-16 22:38:31 atfornes

È vero, stavo usando 'ng-transclude-slot' quando' ng-transclude' avrebbe dovuto essere usato. Ho aggiornato il plunker. Qualche idea su come risolvere il problema condiviso? –

si prega di vedere se le seguenti domande possono aiutare: http://stackoverflow.com/questions/18794968/angular-directive-transclusion-and-inheritance e http://stackoverflow.com/questions/14049480/what-are-the-nuances angularjs -di-scope-prototipale-prototipo-eredità-in- – atfornes

TL; DR; Esempio di lavoro: https://plnkr.co/edit/1ideOiohle8AEzkDJ333?p=preview

Il problema di base che si sta verificando è che quando si esegue il trasporto, l'ambito a cui si ha accesso è l'ambito di livello superiore. Quello che vuoi è fare riferimento allo scope del livello dell'articolo al di fuori della direttiva.

Quindi, invece di usare la transclusione nella direttiva list, lego un modello di stringa come attributo. Devo usare una funzione di compilazione per raccogliere il valore della stringa grezza prima che angolare estrae i segnaposti {{}} e poi io uso $interpolate per creare le funzioni modello itemHeaderTemplate e itemFooterTemplate che vengono quindi utilizzate nel modello come ng-bind-html="itemHeaderTemplate({item: item})".

Nota: per utilizzare ng-bind-html è necessario includere il modulo ngSanitize o si otterrà un'eccezione di sicurezza.

fonte

2016-04-13 14:27:06 Isaac

transclusion multilivello in angolare 1.5

risposta

Problemi correlati