Sometimes, it might be necessary to bind a string of raw HTML. In this case, the
ngBindHtml
directive can be used in the same way as
ngBind
. The only difference will be that it does not escape the content in a secure way, which allows the browser to interpret it.
In order to use this directive, we will need the
angular-sanitize.js dependency. It brings the
ngBindHtml
directive and protects the application against common cross-site scripting (XSS) attacks.
index.html
snippet
<!doctype html>
<html ng-app="parking">
<head>
<title>Parking</title>
<script src="angular.js"></script>
<script src="angular-sanitize.js"></script>
<script>
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function($scope) {
$scope.appTitle = "<b>Parking</b>";
});
</script>
</head>
<body ng-controller="parkingCtrl">
<h3 ng-bind-html="appTitle"></h3>
</body>
</html>