Render modelli di stringhe tramite ng-includono

Question

Sto cercando di rendere un pezzo di html, disponibili su un percorso dinamico, il percorso viene prelevata tramite una chiamata $http.get(), restituisce un pezzo di html,

Solo per fare un esempio provo a caricare questo html parziale:

<h1>{{ pagetitle }}</h1> 
this is a simple page example 

ho fatto un piccolo violino, deridere il problema, ma per semplicità ho lasciato il http chiamata fuori, e appena aggiunto il codice hTML in una stringa sulla portata.

Il controller è:

function Ctrl($scope) { 
    $scope.data = { 
     view: "<h1>whaaaaa</h1>"   
    }; 
} 

la pagina html è questo:

<div ng-app=""> 
    <div ng-controller="Ctrl"> 
    <div ng-include src="data.view"></div> 
    </div> 
</div> 

Il problema è che non aggiunge la stringa nel file html (ng-includere), ma effettua una chiamata http a un url fatto di quella stringa in modo univoco.

Quindi non è possibile inserire semplicemente una stringa in un include? in caso contrario, qual è il modo corretto di effettuare una chiamata http a un URL dinamico e inserire l'URL restituito nella pagina.

Si può giocare con esso in JSFiddle.

Answer 1

È possibile aggiungere ganci statiche alla cache del modello, quindi diciamo che si dispone di un servizio che ottiene il modello:

myApp.service('myTemplateService', ['$http', '$templateCache', function ($templateCache) { 
    $http(/* ... */).then(function (result) { 
    $templateCache.put('my-dynamic-template', result); 
    }); 

    /* ... */ 
}]); 

Poi, si può fare:

<div include src=" 'my-dynamic-template' "></div> 

NOTA di riferimento il nome deve essere racchiuso tra virgolette singole, questo sempre mi byte .... NOTA

No altrimenti dovrai averlo assegnato alla cache del template prima che angular cerchi di risolvere l'url.

EDIT:

Se la logica URL dinamico è abbastanza semplice, è anche possibile utilizzare un condizionale nel ng-comprendono, ad esempio,

<div ng-include="isTrue() && 'template1.html' || 'template2.html'" 

Answer 2

Non è possibile farlo con ng-include; riferimento:

ngInclude | src - {string} - espressione angolare che valuta su URL. Se la sorgente è una costante di stringa, assicurati di inserirla tra virgolette, ad es. src = "'myPartialTemplate.html'".

Uso direttamente ng-bind-html-unsafe simili:

<div ng-bind-html-unsafe="data.view"></div> 

Demo

di creare un legame che si InnerHtml il risultato della valutazione dell'espressione nell'elemento corrente. Il contenuto interno HTML non sarà disinfettato da ! Si dovrebbe usare questa direttiva solo se la direttiva ngBindHtml è troppo restrittiva e se si ha assolutamente fiducia nell'origine del contenuto a cui si sta vincolando.

Answer 3

È possibile utilizzare ng-bind-html-unsafe

Se non vi fidate il codice HTML che viene dalla vostra richiesta Ajax, è anche possibile utilizzare ng-bind-html che ha bisogno il servizio $sanitize al lavoro (DEMO).

<div ng-bind-html="data.view"></div> 

Per utilizzare questo è necessario includere an extra js file.

angular.module('app', ['ngSanitize']); 

E naturalmente aggiungere l'applicazione per ng-app:

<div ng-app="app"> 

Answer 4

ng-include aspetta un URL di un frammento di HTML esterno, non una stringa HTML.

Volete ng-bind-html-unsafe:

Updated demo.