Utilizza ng-include con HTML (o compilato) crudo rispetto a un URL modello?

Question

dire che ho trovato un modello che contiene un elemento con una direttiva ng-include:

<div ng-include src="'templates/top-promo-content.html'"></div> 

Sto tentando di razionalizzare tutti i nostri modelli nella nostra app costruito JS (utilizzando browserify e la brfs trasformare), che , concettualmente, sarebbe simile:

<div ng-include src="fs.readFileSync('./templates/top-promo-content.html', 'utf8')"></div> 

che in ultima analisi tradursi in:

<div ng-include src="<ul><li>list item</li></ul>"></div> 

Esiste un modo per, invece di utilizzare un URL modello all'interno di uno ng-include, utilizzare invece HTML grezzo o compilato? In caso contrario, c'è un'altra alternativa in angolare che mi permetterebbe di realizzare questo, sia come una sorta di inclusione o parziale, ma con la possibilità di includere HTML raw/compilato?

Answer 1

I modelli possono essere inclusi in una pagina con il tag script.

<script type="text/ng-template" id="templates/top-promo-content.html"> 
    <ul><li>list item</li></ul> 
</script> 

questo mette il modello nella cache modello e la direttiva ng-include ottiene da lì. Lo stesso vale per ogni direttiva che ottiene i modelli tramite un URL.

Answer 2

Ho trascorso un paio di giorni su questo e ho trovato un'ottima soluzione utilizzando $templateCache.

javascript

app.run(['$templateCache', function($templateCache) { 
    //Add ng-include templates to template cache 
    $templateCache.put('foo.html', require('./templates/foo.html')); 
    $templateCache.put('bar.html', require('./templates/bar.html')); 
}]); 

html

<ng-include="'foo.html'"></ng-include> 

Ciò includerà i modelli nei tuoi bundle.js.

Inoltre, se si sta eseguendo watchify per rebundle; qualsiasi modifica al modello farà sì che watchify spari un rebundle e kick un live refresh con il nuovo modello.

Answer 3

ho adattato Malkus risposta a farlo funzionare nel mio caso:

Javascript:

app.run(['$templateCache', function($templateCache) { 
    //Add ng-include templates to template cache 
    $templateCache.put('foo.html', fs.readFileSync('/templates/foot.html').toString()); 
}]); 

HTML

<ng-include="'foo.html'"></ng-include> 

Funziona alla grande!