解决AngularJS使用ng-bind-html会过滤html中style属性的问题
来源:互联网 发布:淘宝海外购怎么开店 编辑:程序博客网 时间:2024/05/01 13:33
要输出一个包含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元素中
- 金槌しか持っていなければ、すべての問題は釘に見えてくる
- Nginx负载均衡配置实例详解
- 【Nutch】Nutch-2.3 + HBase-0.94.14 + Solr-4.10.4 集成配置与安装
- 从request中获取上一个请求的url
- 玩转Bootstrap(基础) (4.网格系统实现原理)
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- linux 普通用户添加ssh或禁止ssh
- androoid makefile 学习
- JNI学习2——jni入门篇
- UIButton透明度
- 自定义的一个日历Calender
- 随遇而安来自心甘情愿
- 迭代器iterator
- JPA 继承方式