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?

barbsan
– barbsan

2018-09-26 12:54:07 +00:00
Commented Sep 26, 2018 at 12:54 — barbsan
– barbsan, Commented Sep 26, 2018 at 12:54

Raphael Willian da Costa · Accepted Answer · 2018-09-26 12:57:54Z

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, 2018 at 12:57

Raphael Willian da Costa

262 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Ellison Over a year ago

Ah this is new to me, very intersting function. Seems to work so far. Thank you so much!.

Daniel Ellison Over a year ago

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?

Sandeep · Accepted Answer · 2018-09-26 13:02:20Z

0

Try This

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

answered Sep 26, 2018 at 13:02

Sandeep

611 silver badge4 bronze badges

1 Comment

Daniel Ellison Over a year ago

Thanks but I have an ng-repeat in there also, dont think this will work.

SuperStar518 · Accepted Answer · 2018-09-26 13:04:57Z

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, 2018 at 13:04

SuperStar518

2,9252 gold badges22 silver badges37 bronze badges

2 Comments

Daniel Ellison Over a year ago

Ill give this a try.

Daniel Ellison Over a year ago

Gives the same result {{ example_text_here }}

Collectives™ on Stack Overflow

AngularJS - Using interpolation in a html template

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related