Angular - Interpolate string with html

angularjs string-interpolation
MonsieurNinja picture MonsieurNinja · Dec 4, 2014 · Viewed 34.7k times · Source

So i've got a "template string" that looks like this:

var templateString = "Hello my name is {{name}}";

The name that I want to interpolate is a in variable. So I proceeded this way:

var miniScope = {
 name: "Chuck"
};

var sentence = $interpolate(templateString)(miniScope);
/* sentence: "Hello my name is Chuck" */

This works. Now I'd like to bold the name. I've obviously tried:

var miniScope = {
 name: "<strong>Chuck</strong>"
};

But the html code gets escaped. Any idea how I can achieve this?

PS: For those of you who wonder why I don't just put the string in the template, it's because my template string is coming from the server.

Answer

Kevin Hakanson picture Kevin Hakanson · May 25, 2015

This Plunkr outputs "Hello my name is Chuck" as expected. The JavaScript is unchanged from the question.

var app = angular.module("app", ["ngSanitize"]);
app.controller("TestCtrl", TestCtrl);
function TestCtrl($scope, $interpolate) {
  var templateString = "Hello my name is {{name}}";

  var miniScope = {
    name: "<strong>Chuck</strong>"
  };

  $scope.sentence = $interpolate(templateString)(miniScope);
}

And in your HTML, make use you use ng-bind-html to keep the HTML from being encoded.

  <body ng-controller="TestCtrl">
    <div ng-bind-html="sentence"></div>
  </body>

Related questions

if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More
AngularJS ngClass conditional

Is there any way to make an expression for something like ng-class to be a conditional? For example, I have tried the following: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> The issue with this …

Read More