Render-String-Vorlagen über ng-umfassen

Question

Ich versuche, ein Stück HTML, auf einem dynamischen Weg verfügbar zu machen, die Route über einen $http.get() Anruf geholt wird, ist es ein Stück HTML zurückgibt,

nur eine geben Beispiel versuche ich diesen hTML zu laden Teil:

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

ich machte eine kleine Geige, um das Problem zu verspotten, aber für die Einfachheit verließ ich die http ruft, und fügte hinzu, nur die html in einer Zeichenfolge auf dem Umfang.

Der Controller ist:

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

die HTML-Seite ist dies:

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

Das Problem ist, dass es nicht die Zeichenfolge in die HTML-Datei (ng-include), aber es funktioniert hinzufügen macht einen HTTP-Aufruf an eine URL, die aus dieser Zeichenfolge erzeugt wurde.

So ist es nicht möglich, nur eine Zeichenfolge in ein Include einzugeben? Wenn nicht, was ist der richtige Weg, um einen http-Aufruf an eine dynamische URL zu machen, und geben Sie die zurückgegebene URL in die Seite ein.

Sie können damit in JSFiddle spielen.

Answer 1

Sie können statische Haken an den Template-Cache hinzufügen, also lassen Sie uns sagen, dass Sie einen Dienst haben, der die Vorlage bekommt:

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

    /* ... */ 
}]); 

Dann können Sie tun:

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

HINWEIS Referenz Der Name muss in einfache Anführungszeichen gesetzt werden, dies wird immer von mir gesendet. HINWEIS

Do Beachten Sie, dass Sie es dem Vorlagencache zugewiesen haben müssen, bevor eckle versucht, die URL aufzulösen.

EDIT:

Wenn die dynamische URL-Logik einfach genug ist, können Sie auch eine bedingte Verwendung im ng-umfassen z.B.

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

Answer 2

Sie können das nicht mit ng-include; Referenz:

ngInclude | src - {string} - eckiger Ausdruck, der auf URL auswertet. Wenn die Quelle eine Zeichenfolgenkonstante ist, stellen Sie sicher, dass Sie sie in Anführungszeichen setzen, z. src = "'myPartialTemplate.html'".

Verwenden direkt ng-bind-html-unsafe wie folgt aus:

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

Demo

Erzeugt eine Bindung, die das Ergebnis der Auswertung des Ausdrucks in das aktuelle Element innerHTML-. Der innerHTML-ed Inhalt wird nicht gereinigt werden! Sie sollten diese Direktive nur verwenden, wenn die ngBindHtml Direktive zu restriktiv ist und Sie absolut der Quelle des Inhalts vertrauen, an den Sie gebunden sind.

Answer 3

können Sie ng-bind-html-unsafe

verwenden Wenn Sie nicht die HTML vertrauen, die sich von Ihrer Ajax-Anforderung kommt, können Sie auch ng-bind-html verwenden, die den $sanitize Service arbeiten muss (DEMO).

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

Um das zu verwenden, müssen Sie an extra js file einschließen.

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

Und natürlich die App in dem ng-App: eine URL zu einem externen HTML-Fragmente

<div ng-app="app"> 

Answer 4

ng-include erwartet, nicht ein HTML-String.

Sie wollen ng-bind-html-unsafe:

Updated demo.