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

Home

Web Front-end

HTML Tutorial

Parsing ng-bind-html directive in AngularJS

怪我咯

Apr 30, 2017 am 10:55 AM

angularjsjavascript

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 id="Hello-nbsp-world">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

ng-bind-html command

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

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 id="Hello-nbsp-world">Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>

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 id="Hello-nbsp-world">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>

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!

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