THE WORLD'S LARGEST WEB DEVELOPER SITE

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 »

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.