关于angularJS的ng-bind-html指令

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

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

我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的。是这样的:
hello,这是一个例子(我们给文字设置的b标签样式丢失了)

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

原因是这样的:

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

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

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

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

//注册一个过滤器,挂载到任意一个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标签的自动转义。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTM...
    鹿守心畔光阅读 1,506评论 0 25
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,679评论 0 3
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 2,354评论 0 8
  • 个人博客搭建完成,欢迎大家来访问哦黎默丶lymoo的博客 博主最近了解学习了一下angularJS,记录一下心得给...
    黎默丶lymoo阅读 1,075评论 0 21
  • 早就想写写咖啡了,总觉得这个东西太神奇,为什么味道如此清苦,却有这么多人钟爱? 第一次听到咖啡这个词,是识字以后,...
    慕卿苑阅读 517评论 8 0