AngularJS通过$sce输出html的方法_AngularJS

【问题描述】

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

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

AngularJS输出html的时候,浏览器并不解析这些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标签,并且被浏览器解析了

【总结】

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索html
, angularjs
, bind
, ng
, 输出html
, sce
sce服务
angularjs 输出html、angularjs sce、angularjs sce用法啊、angularjs sce服务、sce.trustashtml,以便于您获取更多的相关知识。

时间: 2024-10-30 14:31:27

AngularJS通过$sce输出html的方法_AngularJS的相关文章

Angularjs中UI Router的使用方法_AngularJS

学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p

AngularJS中实现动画效果的方法_AngularJS

AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script> 还需在应用中使用模型 ngAnimate: <body ng-app="ngAnimate

AngularJS 实现弹性盒子布局的方法_AngularJS

最近在写一个简单的布局框架,其实功能大同小异.但目标要求是用尽量简单的代码,实现一些必用的功能.应用在一些要求加载速度快的场合. CSS部分 .flex-row,.flex{ display: -webkit-flex;display: flex; flex-direction: row; } .flex-col{ display: -webkit-flex; display: flex; flex-direction: column; } Javascript部分 .directive('fl

详解AngularJs中$sce与$sceDelegate上下文转义服务_AngularJS

一.严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文转义为特权或者SCE. 二.$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码): var ngBindHtmlDirective = ['$sce', funct

AngularJS 使用$sce控制代码安全检查_AngularJS

由于浏览器都有同源加载策略,不能加载不同域下的文件.也不能使用不合要求的协议比如file进行访问. 在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因此常常会遇到 一个iframe中的ng-src无法使用. 什么是SCE SCE,即strict contextual escaping,我的理解是 严格的上下文隔离  ...翻译的可能不准确,但是通过字面理解,应该是angularjs严格的控制上下文访问. 由于angular默认是开启SCE的,因此

AngularJS中$apply方法和$watch方法用法总结_AngularJS

本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

使用AngularJS创建自定义的过滤器的方法

  这篇文章主要介绍了使用AngularJS创建自定义的过滤器的方法,AngularJS是非常热门的JavaScript库,需要的朋友可以参考下 Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): 我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是一个将会用到的样本输入: ? 1 2 3 4 5 6 $scop

AngularJS 使用$sce控制代码安全检查

什么是SCE SCE,即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确,但是通过字面理解,应该是angularjs严格的控制上下文访问. 由于angular默认是开启SCE的,因此也就是说默认会决绝一些不安全的行为,比如你使用了某个第三方的脚本或者库.加载了一段html等等. 这样做确实是安全了,避免一些跨站XSS,但是有时候我们自己想要加载特定的文件,这时候怎么办呢? 此时可以通过$sce服务把一些地址变成安全的.授权的链接...简单

在JavaScript的AngularJS库中进行单元测试的方法

这篇文章主要介绍了在JavaScript的AngularJS库中进行单元测试的方法,主要针对AngularJS中的控制器相关,需要的朋友可以参考下 开发者们都一致认为单元测试在开发项目中十分有好处.它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心. 测试驱动开发流程图 AngularJS的代码声称其较高的可测性确实是合理的.单单文档中列出端对端的测试实例就能说明.就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易.即使官方文档中以提供了详尽的实例,但