angularjs显示html标签,AngularJS通过$sce输出html的方法

【问题描述】

AngularJS的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model

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

AngularJS输出html的时候,浏览器并不解析这些html标签

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

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

【解决办法】

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

angular.module("list",[]).controller("BlogListCtrl", BlogListCtrl).filter(

'to_trusted', ['$sce', function ($sce) {

return function (text) {

return $sce.trustAsHtml(text);

}

}]

)

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

这样就可以通过AngularJS正常的输出html标签,并且被浏览器解析了

【总结】

以上就是这篇文章的全部内容了,希望这篇文章的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]中的代码是一个使用AngularJS的示例,其中使用了$sce服务来信任一个资源URL,以便在iframe中加载。$sceAngularJS中的一个服务,用于处理可信任的资源,以防止XSS攻击。在这个例子中,通过调用trustSrc函数,将服务器URL传递给trustAsResourceUrl方法,以确保该URL是可信任的资源。\[1\] 引用\[2\]中的代码是另一个使用AngularJS的示例,其中使用了$sce服务的trustAsHtml方法来信任一个HTML字符串。在这个例子中,通过调用trustAsHtml方法,将HTML字符串传递给explicitlyTrustedHtml变量,以确保该HTML是可信任的。\[2\] 引用\[3\]中的代码是另一个使用AngularJS的示例,其中使用了ng-bind-html指令来绑定一个HTML字符串。在这个例子中,通过将t变量传递给title属性,将t的值作为HTML字符串的一部分进行绑定。\[3\] 根据提供的引用内容,没有提到关于"angularjs的1 ^"的具体含义。请提供更多的上下文或详细信息,以便我能够更好地回答您的问题。 #### 引用[.reference_title] - *1* *2* [angularjs $sce](https://blog.csdn.net/superjunjin/article/details/77372641)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [AngularJS1.x学习(directive 中‘& ’‘=’ ‘@’符号的区别使用)](https://blog.csdn.net/jiangbo_phd/article/details/51897579)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值