Creating string patterns via ng-include

Question

I am trying to display the html part available on a dynamic route, the route is selected by calling $http.get() , it returns the html part,

Just to give an example, I am trying to download this html fragment:

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

I made a little fiddle to mock the problem, but for simplicity I left the http call and just added html to the line in the area.

Controller:

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

Html page:

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

The problem is that it does not add the line to the html file (ng-include), but does the URL of the URL made from that line, apparently.

So is it not possible to just enter a string in include? if not, how can you make an http call to a dynamic URL and enter the return URL on the page.

You can play with it in JSFiddle .

Answer 1

You can add static hooks to the template cache, so let's say you have a service that receives the template:

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

Then you can do:

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

NOTE the link name must be wrapped in single quotes, this is always byte me .... NOTE

Note that you will have to assign it in the template cache before angular tries to resolve the url.

EDIT:

If the dynamic URL logic is simple enough, you can also use a conditional expression in ng-include, for example.

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

Answer 2

You cannot do this with ng-include ; link:

ngInclude | src - {string} is an angular expression evaluating a URL. If the source is a string constant, make sure you wrap it in quotation marks, for example. src = "myPartialTemplate.html".

Use directly ng-bind-html-unsafe as follows:

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

Demo

Creates a binding that will be innerHTML as the result of evaluating the expression in the current element. The contents of innerHTML will not be sanitized! You should use this directive only if the ngBindHtml directive is too restrictive, and when you absolutely trust the source of the content to which you are bound.

Answer 3

You can use ng-bind-html-unsafe

If you don't trust the html that comes from your ajax request, you can also use ng-bind-html , which requires the $sanitize service to work ( DEMO ),

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

To use this you need to add an additional js file .

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

And, of course, add the application to ng-app:

 <div ng-app="app"> 

Answer 4

ng-include expects the URL of an external HTML fragment, not an HTML string.

You want ng-bind-html-unsafe :

Updated demo .