AngularJS - Using interpolation in a html template

Question

Not sure if anyone has come across this situation before, looking up on google I cant seem to find examples. Bascially I am creating a lenghty html template and i wrap it in a ng-bing-html, it loads my html but it dosent load my interpolation. Let me give you a quick example:

Controller:

$scope.example_text_here = "Hello World!"
$scope.HTML_template = "<p><strong> Example: </strong> {{ example_text_here }}</p>"

HTML:

<div ng-bind-html="HTML_template"></div>

Output

Example: {{ example_text_here }}

What I am expecting:

Example: Hello world!

Anyone know how to accomplish this?

Possible duplicate of [AngularJS data bind in ng-bind-html?](https://stackoverflow.com/questions/20796102/angularjs-data-bind-in-ng-bind-html) — barbsan, Sep 26 '18 at 12:54

score 1 · Accepted Answer · answered Sep 26 '18 at 12:57

1

You should use $interpolate module and then injecting current scope or even $compile. See more https://docs.angularjs.org/api/ng/service/$interpolate

$interpolate($scope.HTML_template)($scope)

answered Sep 26 '18 at 12:57

Raphael Willian da Costa

26
2

Ah this is new to me, very intersting function. Seems to work so far. Thank you so much!. – Daniel Ellison Sep 26 '18 at 18:43
One small thing tough, the ng-bind-html do not seem to work. Looking this up but would you know what the proper way of doing it with $interpolate? – Daniel Ellison Sep 26 '18 at 18:48

score 0 · Answer 2 · answered Sep 26 '18 at 13:02

0

Try This

$scope.HTML_template = "<p><strong> Example: 
 </strong>"+$scope.example_text_here+"</p>";

answered Sep 26 '18 at 13:02

Sandeep

61
1
4

Thanks but I have an ng-repeat in there also, dont think this will work. – Daniel Ellison Sep 26 '18 at 18:31

score 0 · Answer 3 · answered Sep 26 '18 at 13:04

0

I think you'd use $sce service of AngularJS.

Controller:

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

.controller('myCtrl', function($scope, $sce) {
  ...
  $scope.trustAsHtml = function(params) {
    return $sce.trustAsHtml(params);
  };
  ...
  $scope.example_text_here = "Hello World!";
  $scope.HTML_template = "<p><strong> Example: </strong> {{ example_text_here }}</p>";
  ...
});

Markup:

<div ng-bind-html="trustAsHtml(HTML_template)"></div>

Now hope you'd get your expected result. Thanks.

answered Sep 26 '18 at 13:04

SuperStar518

2,814
2
20
35

Ill give this a try. – Daniel Ellison Sep 26 '18 at 18:31
Gives the same result {{ example_text_here }} – Daniel Ellison Sep 26 '18 at 18:37

AngularJS - Using interpolation in a html template

3 Answers3