Menu
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.
386
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>
use this directive to compile stuff from the string.
.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
}])
$scope.name = "Vladimir";
$scope.str = "Hello my name is <strong>{{name}}</strong>";
<div compile="str"></div>
and use $sce to compile trusted html if You need Angular $sce doc
but all of this stuff not angular way actualy, You have to use some different partials and include it with ng-include directive.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
