解决AngularJS使用ng-bind-html会过滤html中style属性的问题
来源:互联网 发布:部落冲突亡灵升级数据 编辑:程序博客网 时间:2024/04/18 18:21
要输出一个包含html格式效果的文本就是字符串
众所周知,就是要通过ng-bind-html来进行数据绑定
<small class="block m-t-sm img-full" data-ng-bind-html="vm.contentdetial.content" ></small>
首先一个简单的例子输出字符串“hello<br>AngularJS”
我们期待的结果是:
hello
angularJS
如果只是普通的使用{{}}进行数据绑定,显然无法识别转义html,输出结果即为:
hello<br>angularJS
字符串内容。
现在已经了解ng-bind-html的效果了,那么现在升级一步,我们给字符串中的html标签加入样式。(原谅我找了一个看起来很复杂的例子。。。)
<section style="border: 0px; margin: 0.8em 0px 0.5em; box-sizing: border-box; padding: 0px;" class="tn-Powered-by-XIUMI"><span style="display: inline-block; padding: 0.3em 0.5em; border-radius: 0.5em; color: rgb(255, 255, 255); font-size: 1em; box-shadow: rgb(165, 165, 165) 0.2em 0.2em 0.1em; font-family: inherit; text-decoration: inherit; border-color: rgb(249, 110, 87); box-sizing: border-box; background-color: rgb(249, 110, 87);" class="tn-Powered-by-XIUMI"><section class="tn-Powered-by-XIUMI" style="box-sizing: border-box;">请输入标题</section></span><section style="width: 0px; height: 0px; clear: both;"></section></section>
请输入标题
而使用ng-bind-html显示的结果那就~~~~
请输入标题
你没有看错,竟然只显示出了文字,没有样式,审查元素看看是什么情况
<section class="tn-Powered-by-XIUMI"><span class="tn-Powered-by-XIUMI"><section class="tn-Powered-by-XIUMI">请输入标题</section></span><section></section></section>
问题显而易见了,所有的style被过滤了,或者说是忽略了,没有展示出来。那么现在就要解决这个问题了。
我就展示我公司项目的代码了,在页面相应的controller.js中使用$sce.trustAsHtml()
(function () {
var injectParams = ['$scope', '$location', '$routeParams',
'$timeout', 'config', 'dataService','toaster','$sce' ];
var ContentController = function ($scope, $location, $routeParams,
$timeout, config, dataService,toaster,$sce) {
var vm = this,
contentId = ($routeParams.contentId) ? parseInt($routeParams.contentId) : 0,
timer,
onRouteChangeOff;
vm.contentdetial = {};
function getContent() {
dataService.getContent(contentId)
.then(function (data) {
vm.contentdetial = data;
vm.contentdetial.content = $sce.trustAsHtml(data.content);
$timeout(function () {
}, 1000);
}, function (error) {
toaster.pop('warning', "处理失败", "很遗憾处理失败,由于网络原因无法连接到服务器!");
});
}
function init() {
getContent();
}
init();
};
ContentController.$inject = injectParams;
angular.module('serviceApp').controller('ContentController', ContentController);
}());
解决方法就是在controller中给数据也就是要显示的内容字符串使用$sce.trustAsHtml()
vm.contentdetial.content = $sce.trustAsHtml(data.content);
data.content就是带html格式的字符串。
这样就可以显示出所需要的样式了。
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- AngularJS使用ng-bind-html会过滤html中style属性的问题
- angularjs中ng-bind-html使用问题
- ng-bind-html 的使用
- AngularJS 2 中如何实现ng-bind-html
- AngularJS 2 中如何实现ng-bind-html
- 解决angularjs 使用 ng-repeat 循环输出时html元素无法解析的问题
- angularJS中把html格式的字符串转成html格式显示,ng-bind-html与trustAsHtml的过滤器
- ng-bind-html和.$compile的使用
- angularJS 中html 标签绑定样式,ng-class的使用
- AngularJs ng-bind-html指令整理
- ng-bind-html的作用
- angularjs ng-bind-html 指令 对html标签转译
- html:optionsCollection 的 filter 过滤属性使用心得 - 解决空格不能显示的问题
- angular——ng-bind,ng-cloak,ng-src,ng-href解决AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果
- angularjs使用ng-repeat不用包含在html元素中
- angularjs使用ng-switch不用包含在html元素中
- Oracle 执行计划优化
- AngularJs+bootstrap搭载前台框架2
- ThinkPHP中的行为扩展和插件详解
- linux IIC子系统分析(六)——I2c plaform driver 初始化
- Linear Layout
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- Ubuntu 14.04 安装xvid编码器
- 关于arcgis 9.3 Java服务器发布服务问题
- <LeetCode OJ> 357. Count Numbers with Unique Digits
- 单链表的增、删、查、改、逆置、排序
- restoration of CBCentralManager is only allowed for applications that have specified the "bluetooth-
- 图片压缩工具Thumbnailator的使用
- AngularJs+bootstrap搭载前台框架3
- 博客搬家