深入理解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常见表单应用技巧
Jan 09 Javascript
JQuery 常用操作代码
Mar 14 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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和ACCESS写聊天室(十)
2006/10/09 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php统计数组元素个数的方法
2015/07/02 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
linux下php上传文件注意事项
2016/06/11 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
javascript 特殊字符串
2009/02/25 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
基于pandas中expand的作用详解
2019/12/17 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
Django视图类型总结
2021/02/17 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
vue项目支付功能代码详解
2022/02/18 Vue.js
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS