'Using HTML Entities within AngularJS strings
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?
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 = "© Acme";
});
angular.bootstrap(document, ['app']);
});
</script>
</body>
</html>
Solution 1:[1]
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("© Acme");
});
angular.bootstrap(document, ['app']);
});
</script>
Solution 2:[2]
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 = '½ Cookies & <span class="cream">Cream</span>';
});
Html
<div ng-bind-html="title"></div>
Plunkr
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Daniel Gimenez |