AngularJS ng-bind-html Directive
Example
Bind the innerHTML of the <p> element to the variable myText:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>
Try it Yourself »
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>
Definition and Usage
The ng-bind-html directive is a secure
way of binding content to an HTML element.
When you are letting AngularJS write HTML in your application, you should check the HTML for dangerous code. By including the "angular-sanitize.js" module in your application you can do so by running the HTML code through the ngSanitize function.
Syntax
<element ng-bind-html="expression"></element>
Supported by all HTML elements.
Parameter Values
| Value | Description |
|---|---|
| expression | Specifies a variable, or an expression to evaluate. |