Using HTML Entities within AngularJS strings

Question

Given a string in my $scope model which contains an HTML entity, how do I ensure that the entity is properly displayed as an HTML character rather than a literal string?

HTML entity - MDN Glossary

http://plnkr.co/edit/0BliljcDkj0vvj3jdEqz?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" 
            data-semver="1.2.13" 
            src="http://code.angularjs.org/1.2.13/angular.js"></script>

  </head>

  <body>
    <div ng-controller="htmlChar">{{title}}</div>

    <script>

      angular.element(document).ready(function(){

        var app=angular.module("app",[]);
        app.controller("htmlChar",function($scope){
          $scope.title = "&copy; Acme";
        });
        angular.bootstrap(document, ['app']);

      });

    </script>

  </body>
</html>

A character entity, © for example. w3schools.com/html/html_entities.asp — mccainz
– mccainz, Commented Feb 20, 2014 at 21:07

Daniel Gimenez · Accepted Answer · 2016-02-18 15:04:02Z

16

You do not need $sce to bind to strings with html. All you need is to inject ngSanitize into your app (it is not a core module), and then use the ng-bind-html attribute directive.

JavaScript

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

app.controller('MainCtrl', function($scope) {
    $scope.title = '&#189; Cookies &amp; <span class="cream">Cream</span>';
});

Html

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

Plunkr

answered Feb 18, 2016 at 15:04

Daniel Gimenez

21.1k4 gold badges60 silver badges78 bronze badges

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

Comments

romainberger · Accepted Answer · 2014-02-20 22:01:44Z

14

With $sce. You need to explicitely tell angular the content is html.

<div ng-controller="htmlChar" ng-bind-html="title"></div>

<script>

  angular.element(document).ready(function(){

    var app=angular.module("app",[]);
    app.controller("htmlChar",function($scope, $sce){
      $scope.title = $sce.trustAsHtml("&copy; Acme");
    });
    angular.bootstrap(document, ['app']);

  });

</script>

http://plnkr.co/edit/9iNnRC7AxFptnQZLPtYR?p=preview

edited Feb 20, 2014 at 22:01

answered Feb 20, 2014 at 21:07

romainberger

4,5582 gold badges37 silver badges51 bronze badges

2 Comments

michael Over a year ago

and he must use ng-bind-html

Antony Gibbs Over a year ago

and for ng-bind-html to work you need angular-sanitize too

Collectives™ on Stack Overflow

Using HTML Entities within AngularJS strings

2 Answers 2

Plunkr

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related