Home > Article > Web Front-end > In-depth understanding of the graphic code of the ng-bind-html directive in AngularJS

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

黄舟Original: 2017-03-28 14:58:071237browse

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>

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>

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>

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>

##. #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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to using NPM Taobao's node.js image to accelerate nvmNext article：Detailed introduction to using NPM Taobao's node.js image to accelerate nvm

See more

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

Related articles