Render szablony ciąg poprzez ng obejmują

Question

próbuję renderować kawałek HTML, dostępne na dynamicznym trasa, trasa jest pobierany przez $http.get() rozmowy, zwraca kawałek html,

Wystarczy, otrzymując przykładem próbuję załadować html częściowy:

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

zrobiłem mały skrzypce, wyśmiewać problemu, ale dla uproszczenia opuściłem http zawołać, i po prostu dodaje html w ciąg w sprawie zakresu.

Kontroler jest:

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

stronie HTML jest taka:

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

Problemem jest to, że nie dodaje ciąg do pliku html (ng-to), ale wykonuje wywołanie http do adresu URL utworzonego z tego ciągu.

Więc nie można po prostu wprowadzić ciągu znaków do pliku włączania? jeśli nie, jaki jest właściwy sposób na wywołanie http do dynamicznego adresu URL i wprowadź zwrócony URL na stronę.

Możesz grać z nim w JSFiddle.

Answer 1

Możesz dodać haki statycznych do pamięci podręcznej szablonów, więc powiedzmy, że masz usługę, która dostaje szablon:

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

    /* ... */ 
}]); 

Następnie można zrobić:

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

WSKAZÓWKA odniesienie nazwa musi być zawijana w pojedyncze cudzysłowy, to zawsze mnie bajta ... UWAGA

Do n Uwaga: zanim kątowy spróbuje rozwiązać adres URL, musisz go przypisać do pamięci podręcznej szablonów.

EDIT:

Jeśli logika dynamiczna URL jest dość prosta, można również korzystać z warunkowego w ng obejmują, na przykład

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

Answer 2

Nie można tego zrobić z ng-include; numer:

ngInclude | src - {string} - wyrażenie kątowe oceniające adres URL. Jeśli źródłem jest stała łańcuchowa, upewnij się, że zawijasz ją w cudzysłów, np. src = "'myPartialTemplate.html'".

bezpośredniego użycia ng-bind-html-unsafe tak:

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

Demo

tworzy połączenia, które InnerHTML wynik oceny ekspresji do bieżącego elementu. Treść innerHTML-ed nie zostanie oczyszczona! Ta dyrektywa powinna być używana tylko wtedy, gdy dyrektywa ngBindHtml jest zbyt restrykcyjna i jeśli całkowicie ufasz źródłu zawartości, do której się zobowiązujesz.

Answer 3

Można użyć ng-bind-html-unsafe

Jeśli nie ufasz html, który pochodzi z żądania AJAX, można również użyć ng-bind-html który potrzebuje usługi $sanitize do pracy (DEMO).

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

Do korzystania z tego należy dołączyć an extra js file.

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

I oczywiście dodać aplikację do NG-app:

<div ng-app="app"> 

Answer 4

ng-include oczekuje URL do zewnętrznego fragmentu HTML, a nie ciąg HTML.

Chcesz ng-bind-html-unsafe:

Updated demo.