angular输出html

在用angular作为前端搭建个人博客的时候,发现用angularJs输出html的时候,浏览器并不解析这些html标签,不知道angularjs如何实现这种功能的。

但是这里我们需要其显示angular输出的html能被浏览器解析怎么办呢?

通过api,发现通过指令 ng-bind-html来实现html的输出。

<div class="col-md-12 ng-binding" ng-bind-html="item.content ">

但是并不起作用,浏览器中显示的还是html代码。

‘后来发现还需要通过通过$sce服务来实现html的展示。

	angular.module("list",[]).controller("BlogListCtrl", BlogListCtrl).filter(
		'to_trusted', ['$sce', function ($sce) {
			return function (text) {
	    		return $sce.trustAsHtml(text);
	    	}
		}]
	)

这里通过$sce构建一个过滤器来对输出的html进行过滤

<div class="col-md-12 ng-binding" ng-bind-html="item.content|to_trusted ">
这样就可以通过angularjs正常的输出html标签,并且被浏览器解析了

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值