2016-02-09 21 views
39

Sembra che non ci sia l'opzione "Sostituisci" nel nuovo concetto di componente AngularJS 1.5 (come per le direttive).Componente angolare: nessuna opzione di sostituzione modello?

Che cosa suggerireste se volessi avere l'elemento riga tabella<TR> come componente? Non è possibile in termini di HTML valido?

Esempio reale: il componente mailBox contiene componenti di posta interni. Per markup mail-box-component è table, e mail-box è tr.

<mail-box> 
    <mail ng-repeat="mail in $ctrl.mails" mail="mail"></mail> 
<mail-box> 

UPD: legati discussione su direttive - Why is replace deprecated in AngularJS?

+0

La soluzione è quella di non utilizzare markup e CSS con severi requisiti strutturali. Cosa fa esattamente 'mail'? La cassetta postale più probabile deve assorbire la sua funzionalità e l'intero modello. – estus

+0

Voglio che ogni messaggio sia il componente separato –

+0

Questo è il lavoro per le direttive, non i componenti. I componenti sono concepiti come widget dell'interfaccia utente autonomo, maggiori informazioni su Componenti Web. – estus

risposta

20

Questo non è possibile il-angolare vie più dal momento che la sostituzione: vera bandiera è stato sconsigliato

Why is replace deprecated in AngularJS?

la sostituzione: true flag aveva creato più problemi di soluzioni che io s perché è stato rimosso. quindi non puoi più costruire direttive in questo modo e fornire un markup valido di table-tr-td.

Tuttavia, ci sono due ragioni per cui questo non è così male come sembra:

  1. si può fare tutto quello che volete fare a meno di tavolo, tr, td, ecc usando solo elementi come div , span, ecc. e alcuni css su di esso

  2. componenti Web (e le direttive erano un primo tentativo di simulare ) non sono pensati per rappresentare frammenti così piccoli del markup. sono più considerati come un componente completamente funzionale in realtà facendo qualcosa. quindi qualunque cosa tu voglia fare con il tuo tr che tu sia il pensa che valga la pena di costruire una direttiva-elemento attorno ad esso, non lo è probabilmente .

Forse, quello che si può fare è utilizzare un attributo-direttiva invece:

<tr my-mail-directive></tr> 

e My-mail direttiva fa la magia sull'elemento tr

+1

Gli attributi non sono possibili per i componenti, se ho capito bene i documenti. "restrict: No (limitato solo agli elementi)" – bersling

+0

@PatrickKelleter la dicitura che stai usando causa solo confusione.I componenti NON sono direttive, le direttive NON fanno parte di Angular2 e sono semplici, dire che un componente è una direttiva confonde solo le persone –

+0

@BrianOgden quello che ho detto è che le vecchie direttive di elmento (ng1, restrict: 'E') sono ora conosciuti come componenti in ng2 - mentre le direttive dell'attributo OLD (ng1, restrict: 'A') non sono conosciute come direttive in ng2. e SÌ - ci sono direttive in ng2. affermare che le direttive non fanno parte di ng2 è sbagliato: chiaro e semplice. controlla la documentazione per esso https://angular.io/docs/ts/latest/guide/attribute-directives.html –

Problemi correlati