angularJS的ng-bind-html指令这么用

本文小编为大家详细介绍“angularJS的ng-bind-html指令这么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“angularJS的ng-bind-html指令这么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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

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

　　我们用ng-bind-html这样的指令来绑定，结果却不是我们想要的。是这样的：

　　hello,这是一个例子（我们给文字设置的b标签样式丢失了）

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

　　原因是这样的：

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

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

　　这个时候我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“StrictContextualEscaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”来绑定。

　　来看看如何使用吧：

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

　　//注册一个过滤器，挂载到任意一个angular.module下，如果自定义过滤器较多，可以提取出来一个公用的过滤器module

　　.filter('to_trusted',['$sce',function($sce){returnfunction(text){return$sce.trustAsHtml(text);

　　};

　　}]);//然后在页面中这样使用<png-bind-html="article.text|to_trusted"></p>

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

读到这里，这篇“angularJS的ng-bind-html指令这么用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。