登录  /  注册

angularJS的ng-bind-html指令详解

php中世界最好的语言
发布: 2018-03-08 10:21:39
原创
1870人浏览过

这次给大家带来angularjs的ng-bind-html指令详解,使用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 = &#39;<p style="color:red;font-size=18px;"></p>&#39;;
登录后复制

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

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

//注册一个过滤器,挂载到任意一个angular.module下,如果自定义过滤器较多,可以提取出来一个公用的过滤器module
    .filter(&#39;to_trusted&#39;, [&#39;$sce&#39;, 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指令详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号