angularJS的ng-bind-html指令详解

angular js的强大之处之一就是他的数据双向绑定这个功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如：

$scope.text = “hello,<br><b> 这是一个例子</b>”

调试了半天，最后锁定问题并解决问题。，不过辛苦还是值得的，毕竟为了弄明白这一点又学习了更多代码。

原因是这样的：

angularJS在进行数据绑定时默认是会以文本的形式输出，也就是对你数据中的html标签不进行转义照单全收，这样提高了安全性，防止了html标签中的注入攻击。但是如果我们的应用场景，是类似于文章详情页，从数据库读取带格式的文本时，无法正常的显示在页面中。如下：

$scope.htmlStr = '<p style="color:red;font-size=18px;"></p>';

把它封装成一个过滤器就可以在模板上随时调用了

//注册一个过滤器，挂载到任意一个angular.module下，如果自定义过滤器较多，可以提取出来一个公用的过滤器module      .filter('to_trusted', ['$sce', function ($sce) {        return function (text) {            return $sce.trustAsHtml(text);          };      }]);//然后在页面中这样使用<p ng-bind-html="article.text | to_trusted"></p>

$sce是angularJS自带的安全处理模块，$sce.trustAsHtml(input)方法便是将数据内容以html的形式进行解析并返回。将此过滤器添加到ng-bind-html所绑定的数据中，便实现了在数据加载时对于html标签的自动转义。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

WEB的接口管理工具

ionic应用里文字不能长按复制、粘贴怎么办

以上就是angularJS的ng-bind-html指令详解的详细内容，更多内容请关注技术你好其它相关文章！