Why doesn't HTML render when passed from AngularJS?

Question

I'd like to pass HTML back to the webpage but it is coming through as literal. Any ideas what I'm doing wrong?

HTML:

<div ng-app="app" ng-controller="ctrl">
 {{price}}
<br>
    Only <strike>$49</strike> $29
</div>

Angular:

var app = angular.module('app',[]);

app.controller('ctrl', function($scope,$sce){
    $scope.price = $sce.trustAsHtml('Only <strike>$'+49+'</strike> $'+29);;
});

Output:

Only <strike>$49</strike> $29 
Only $49 $29

Example: http://jsfiddle.net/eyks7zu9/3/

Jhecht · Accepted Answer · 2014-12-15 04:11:19Z

2

Below is your code, with a <span> tag added that has an ng-bind-html value. I could be totally wrong, as I'm not the best with angular myself, but I don't believe that what you are trying to do will work as you intend as Angular tries to keep the Sandbox model pretty rigid with regards to HTML injection.

var app = angular.module('app', []);

app.controller('ctrl', function($scope, $sce) {
  $scope.price = $sce.trustAsHtml('Only <strike>$' + 49 + '</strike> $' + 29);;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <span ng-bind-html="price"></span>
  <br>Only <strike>$49</strike> $29
</div>

answered Dec 15, 2014 at 4:11

Jhecht

4,4352 gold badges31 silver badges48 bronze badges

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

2 Comments

4thSpace Over a year ago

Ok. Just a matter of going with ng-bind-html? And you still need to use SCE?

Jhecht Over a year ago

Yes to both. If you remove the $sce and attempt to simply assign the HTML to the $scope.price a security error is thrown by angular.

Collectives™ on Stack Overflow

Why doesn't HTML render when passed from AngularJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related