Parsing a template from an object in AngularJS

Question

I got a data structure like this

var abc = [
              {question: 'Do {{foo}} like <strong>you</strong>?'},
              {question: 'Do {{foo}} like <strong>fruits</strong>?'}
          ];

A Template like this

<h1>Question</h1>
<span> {{question}} </span>

And in my controller something like this:

$scope.foo = 'Example',
$scope.question = abc[0].question;

As you probably know this does not work.

How could I parse string to a template to use it with variables?

Answer 1

You can use ng-bind-html like:

<ng-bind-html
  ng-bind-html="expression">
...
</ng-bind-html>

but this require compiling.

Have a look at this directive: https://github.com/incuna/angular-bind-html-compile

you can use it this way:

<div bind-html-compile="question"></div>

Your question will be injected and compiled for you.

Answer 2

Controller:

var foo = 'Example';

var abc = [
   {question: 'Do ' + foo + ' like <strong>you</strong>?'},
   {question: 'Do ' + foo + ' like <strong>fruits</strong>?'}
];

$scope.question = abc[0].question;

View:

<h1>Question</h1>
<span ng-bind-html="question"></span>