In-depth understanding of the graphic code of the ng-bind-html directive in AngularJS-JS Tutorial-php.cn

In-depth understanding of the graphic code of the ng-bind-html directive in AngularJS

黄舟

Release： 2017-03-28 14:58:07

Original

1210 people have browsed it

The difference between

ng-bind-html and ng-bind is that ng-bind takes the value as The string is bound to the content of the element, but ng-bind-html takes the value as html and is bound to the html of the element. It is 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 who need it can refer to it.

##Preface

When binding data to the

html tag, if the bound content is plain text, you can use {{}} or ng-bind. But when binding the html tag. When binding content with 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

In-depth understanding of the graphic code of the ng-bind-html directive in AngularJS

##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:

In-depth understanding of the graphic code of the ng-bind-html directive in AngularJS But you can automatically detect whether the html content 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

In-depth understanding of the graphic code of the ng-bind-html directive in AngularJS

So the

ng-bind-html command is a safe way to Content is bound to HTML 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 in the application. , use ngSanitize

function

In your application you can do so by running the HTML code through the ngSanitize function.

Another processing. Method##By customizing the filter

, all content with html tags will be treated 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

##. #Summarize

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