Parsing ng-bind-html directive in AngularJS-HTML Tutorial-php.cn

Parsing ng-bind-html directive in AngularJS

怪我咯

Release： 2017-04-30 10:55:40

Original

1860 people have browsed it

The difference between ng-bind-html and ng-bind is that ng-bind treats the value as a string and binds it to the content of the element, but ng-bind-html treats the value as html and binds it to the element's html. Defined. Equivalent to .text() and .html() in jq. This article mainly gives you an in-depth introduction to the relevant information of the ng-bind-html directive in AngularJS. Friends in need can refer to it.

Preface

When binding data to html tags, if the bound content is plain text, you can use {{} } or ng-bind. But when binding content with html tags to html tags, angularjs will not render it into html for security reasons, but will display it directly on the page as text.

Let’s look at an example first

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="js/angular.min.js"></script>
 <script>
 angular.module("myapp", []).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>
</head>
<body ng-app="myapp">
 <p ng-controller="MyController">
 {{content}}
 <p ng-bind="content"></p> 
 </p>
</body>
</html>

Copy after login

Output

ng-bind-html command

 <p ng-bind-html="content"></p>

Copy after login

At this time, a security error will occur, as shown in the figure :

But you can automatically detect whether the content of html is safe by introducing the following module

 <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>

 <script>
 angular.module("myapp", ["ngSanitize"]).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>

Copy after login

Refresh the preview at this time

So the

ng-bind-html directive is a safe way to bind content to HTML on the elements.

When you want AngularJS to write HTML in your application, you need to detect some dangerous code. By introducing the "angular-santize.js" module into your application, use the ngSanitize function to detect the security of your code. in your application you can do so by running the HTML code through the ngSanitize function.

Another way to handle it

Through custom filtering The processor treats content with html tags as safe.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="js/angular.min.js"></script>
 <!--<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>-->
 <script>
 angular.module("myapp", []).controller("MyController", function ($scope) {
  $scope.content = "<h1>Hello world.</h1>";
  $scope.txt = "Hello txt world";
 }).filter("safeHtml", function ($sce) {
  return function (input) {
  //在这里可以对加载html渲染后进行特别处理。
  return $sce.trustAsHtml(input);
  };
 });
 </script>
</head>
<body ng-app="myapp">
 <p ng-controller="MyController">
 {{content}}
 <p ng-bind="content"></p> 
 <!--<p ng-bind-html="content"></p>-->
 <p ng-bind-html="content|safeHtml"></p>
 </p>
</body>
</html>

Copy after login

The above is the detailed content of Parsing ng-bind-html directive in AngularJS. For more information, please follow other related articles on the PHP Chinese website!