AngularJS - Perché non sostituisce: vero lavoro con la proprietà templateUrl?

Question

Ho una direttiva piuttosto semplice che voglio caricare il modello da un file HTML separato. Voglio che l'HTML sostituisca la direttiva e quindi aggiungo la proprietà replace: true alla direttiva. Tuttavia, quando lo faccio, il modello non viene affatto incluso.

Ho creato un jsFiddle dove è possibile vedere questo. Se usi Firebug o qualcosa per ispezionare il DOM, puoi vedere che quando usa solo la proprietà template sostituisce l'elemento. Se si toglie il numero replace: true, è possibile visualizzare l'HTML allo templateUrl accodandosi all'elemento foo. Tuttavia, non appena aggiungo lo replace: true allo templateUrl, tutto ciò che vedo è <foo></foo> nel DOM.

C'è qualche ragione per cui non è possibile utilizzare queste due proprietà insieme? Sono lontano da un esperto con javascript, quindi qualsiasi informazione su ciò che sta accadendo qui sarebbe molto apprezzata.

Answer 1

Assicurarsi che il contenuto del codice HTML nello templateUrl abbia esattamente un elemento radice. Questo non è un problema quando replace: false ma diventa un problema quando replace: true e vedrete questo errore Console (con Firebug):

Error: Template must have exactly one root element. 

Ecco una jsFiddle di esso not working (con due elementi di root) e un altro con esso working .

Answer 2

Buona domanda. Se non mi sbaglio, che si desidera utilizzare "transclude"

http://jsfiddle.net/dandoyon/AsVp8/1/

Transclude permette di fondere il modello con ciò che è nel codice HTML. Puoi dare un'altra occhiata al doc e cercare questa opzione.

evviva!