SoFunction
Updated on 2025-04-07

AngularJS ng-bind-html instruction detailed explanation and example code

AngularJS ng-bind-html directive

AngularJS instance

Bind innerHTML within <p> to the variable myText:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="/libs//1.4.6/"&gt;&lt;/script&gt;
&lt;script src="/libs//1.5.0-beta.0/"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;

&lt;p ng-bind-html="myText"&gt;&lt;/p&gt;

&lt;/div&gt;

&lt;script&gt;
var app = ("myApp", ['ngSanitize']);
("myCtrl", function($scope) {
 $ = "My name is: &lt;h1&gt;John Doe&lt;/h1&gt;";
});
&lt;/script&gt;

&lt;p&gt;&lt;b&gt;Notice:&lt;/b&gt; This example contains "" document,
该document移除 HTML Danger codes in。&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;

Running results:

           my name  is:

            John Doe

  Notice:This instance contains the "" file, which removes dangerous code from HTML.

Definition and usage

ng-bind-html Directives are a safe way to bind content to HTML elements.
When you want AngularJS to write HTML in your application, you need to detect some dangerous code. By introducing the "" module into your application, the ngSanitize function is used to detect the security of the code. in your application you can do so by running the HTML code through the ngSanitize function.

grammar

<element ng-bind-html="expression"></element>

All HTML elements support this directive.

Parameter value

value describe
expression Specifies the variable or expression to be executed.

The above is a detailed introduction to the AngularJS ng-bind-html instruction example. Friends who need it can refer to it.