Of Stack

Detailed Explanation of AngularJS ng bind html Instruction and Example Code

  • 2021-07-06 10:03:03
  • OfStack

AngularJS ng-bind-html Directive

AngularJS instance

Binding < p > innerHTML in to variable myText: 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
</head>
<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>

<p><b> Attention :</b>  This instance contains the  "angular-sanitize.js"  Documents ,
 The file is removed  HTML  The hazard code in. </p>

</body>
</html>

Run results:

my name is:

John Doe

Note: This example contains the "angular-sanitize. js" file, which removes hazard codes from HTML.

Definition and usage

The ng-bind-html directive is a secure way to bind content to an HTML element.
When you want AngularJS to write HTML to your application, you need to check for some dangerous codes. By introducing "angular-santize. js" module into the application, 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 instruction.

Parameter value

值 描述
expression 指定要执行的变量或表达式。

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

Related articles: