ng-bind-html和ng-bind的区别在于，ng-bind将值作为字符串绑定到元素的内容，而ng-bind-html将值作为html绑定到元素的html，这相当于。文本()和。jq中的html()。本文主要介绍AngularJS中ng-bind-html指令的相关信息，供大家参考。
前言
为html标签绑定数据时，如果内容是纯文本，可以使用{{}}或ng-bind。但是，在将内容与html标签绑定为html标签时，出于安全考虑，angularjs不会将其渲染为html，而是直接在页面上显示为文本。
我们先来看一个例子
<!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>输出
ng-bind-html指令
<p ng-bind-html="content"></p>这时会出现安全错误，如图:
但是你可以通过引入下面的模块来自动检测html的内容是否安全。
<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>预览被刷新。
所以
ng-bind-html指令以一种安全的方式将内容绑定到html元素。
当你希望AngularJS在你的应用中编写HTML时，你需要检测一些危险的代码。通过引入“angular-santize . js & quot；模块，使用ngSanitize函数检测代码的安全性。在您的应用程序中，您可以通过ngSanitize函数运行HTML代码来实现这一点。
另一种处理方法
通过自定义过滤器，带有html标签的内容被视为安全内容。
<!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>以上是AngularJS解析ng-bind-html指令的详细内容。更多信息请关注AdminJS中的其他相关文章！