深入理解AngularJS中的ng-bind-html指令和$sce服务


Posted in Javascript onSeptember 08, 2016

前言

Angularjs的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。

但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签。

如:

$scope.currentWork.description = “hello,<br><b>今天我们去哪里?</b>”

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

是这样的

hello,
今天我们去哪里?

怎么办呢?

对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。

来看看怎么用吧。

controller code:

$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});

HTML code:

<p> {{currentWork.description}}</p>

我们返回的内容中包含一系列的html标记。表现出来的结果就如我们文章开头所说的那样。这时候我们必须告诉它安全绑定。它可以通过使用$ sce.trustAsHtml() 。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以,我们必须在我们的控制器中引入$sce服务

controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
$http.get('/api/work/get?workId=' + $routeParams.workId)
.success(function (work) {
 $scope.currentWork = work;
 $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
});

html code:

<p ng-bind-html="currentWork.description"></p>

这样结果就完美的呈现在页面上了:

hello 
今天我们去哪里?

咱们还可以这样用,把它封装成一个过滤器就可以在模板上随时调用了

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

html code:

<p ng-bind-html="currentWork.description | to_trusted"></p>

总结

以上就是关于AngularJS中的ng-bind-html指令和$sce服务的全部内容了,希望对大家的学习或者工作带来一定的帮助,如果有问题可以留言交流。

Javascript 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
最简单的tab切换实例代码
May 13 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 #Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 #Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 #Javascript
jQuery事件绑定用法详解
Sep 08 #Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 #Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 #Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 #Javascript
You might like
PHP 面向对象实现代码
2009/11/11 PHP
php文件操作实例代码
2012/05/10 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP asXML()函数讲解
2019/02/03 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
如何让页面加载完成后执行js
2013/06/26 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python实现多属性排序的方法
2018/12/05 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
高三语文教学反思
2014/01/15 职场文书
《桥》教学反思
2014/04/09 职场文书
初三学习计划书范文
2014/04/30 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
2014年征兵标语
2014/06/20 职场文书
管理工程专业求职信
2014/08/10 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
六年级学生期末评语
2014/12/26 职场文书
文艺演出主持词
2015/07/01 职场文书
礼貌问候语大全
2015/11/10 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
SQL SERVER存储过程用法详解
2022/02/24 SQL Server