Render string templates via ng-include

Question

I am trying to render a piece of html, available on a dynamic route, the route is fetched via a $http.get() call, it returns a piece of html,

Just to give an example I try to load this html partial:

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

I made a small fiddle, to mock the problem, but for the simplicity i left the http call out, and just added the html in a string on the scope.

The controller is:

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

The page html is this:

<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 string into the html file (ng-include), but it makes a http call to a url made of that string aparently.

So Is it not possible to just enter a string into an include? if not, what is the proper way to make an http call to a dynamic url, and enter the returned url into 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 gets 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 reference name must be wrapped in single quotes, this always bytes me.... NOTE

Do note that you'll have to have assigned it to 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 in the ng-include, e.g.

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

Answer 2

You can't do that with ng-include; reference:

ngInclude|src – {string} – angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in quotes, e.g. src="'myPartialTemplate.html'".

Use directly ng-bind-html-unsafe like this:

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

Demo

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

Answer 3

You can use ng-bind-html-unsafe

If you do not trust the html which comes from your ajax request, you can also use ng-bind-html which needs the $sanitize service to work (DEMO).

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

To use that you need to include an extra js file .

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

And of course add the app to ng-app:

<div ng-app="app">

Answer 4

ng-include expects a URL to an external HTML fragment, not an HTML string.

You want ng-bind-html-unsafe:

Updated demo.