AngularJS通过$sce输出html的方法

【问题描述】

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标签，并且被浏览器解析了

【总结】

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

赞 (0)

相关推荐

  • 深究AngularJS中$sce的使用

    为什么要要$sce?因为AngularJS里好些地方,比如路径默认是个字符串,不会认为是路径,从而访问不到我们需要的东西,那么我们就可以通过$sce告诉angualrJS这个路径,这样是很安全滴.它有以下几种: $sce.trustAs(type,name); $sce.trustAsUrl(value); $sce.trustAsHtml(value); $sce.trustAsResourceUrl(value); $sce.trustAsJs(value); 1.trustAsResour

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

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

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

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

  • 深入理解AngularJS中的ng-bind-html指令和$sce服务

    前言 Angularjs的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model. 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签. 如: $scope.currentWork.description = "hello,<br><b>今天我们去哪里?</b>" 我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的. 是这样的 hello,

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

    [问题描述] 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.cont

  • AngularJS实现动态添加Option的方法

    AngularJS实现动态添加Option的方法

    本文实例讲述了AngularJS实现动态添加Option的方法.分享给大家供大家参考,具体如下: 项目中后台管理设置,前台下拉动态添加option <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&q

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

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

  • Thinkphp模板没有解析直接原样输出的解决方法

    Thinkphp模板没有解析直接原样输出的解决方法

    本文实例讲述了Thinkphp模板没有解析直接原样输出的解决方法.分享给大家供大家参考.具体如下: 一.问题: 最近在学习thinkphp模板了,但是发现模板页原样出来了,经过一番艰苦搜索终于找到解决方案. 二.解决方法: 很多人都碰到相同问题,在变量中赋值的字符串中包含的__ROOT__.__PUBLIC__.__APP__,这种字符的, 在模板中display出来的时候都被替换成了真实路径.话说是在写Timi文件管理系统的时候发现的这个问题. 从文件中把源码读出来输出到页面后发现,只要是TP

  • PHP实现数据库统计时间戳按天分组输出数据的方法

    本文实例讲述了PHP实现数据库统计时间戳按天分组输出数据的方法.分享给大家供大家参考,具体如下: 比如统计每天用户注册数,数据库表存了一张用户注册记录表: create table table_name(id int primary key,register_time int(10)); register_time记录的是时间戳,以前的做法是,接收查询开始时间.查询结束时间,然后循环查询每天的注册数量,代码: /* 查询2015-12-01 至 2015-12-14 */ // 开始的时间戳 $

  • JSP中使用JSTL按不同条件输出内容的方法

    本文实例讲述了JSP中使用JSTL按不同条件输出内容的方法.分享给大家供大家参考.具体如下: ConditionalContentJSTL.jsp页面: <%@ page language="java" contentType="text/html;charset=UTF-8" %> <%@ taglib uri="/WEB-INF/tld/c-rt.tld" prefix="c-rt" %> <

  • AngularJS ng-repeat遍历输出的用法

    AngularJS  ng-repeat遍历输出的用法,最近需要用,就顺便发到随笔上了 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ng-repeat directive</title> </head> <body ng-app="myApp"> <table ng-controller=&

  • PHP使用GD库输出汉字的方法【测试可用】

    PHP使用GD库输出汉字的方法【测试可用】

    本文实例讲述了PHP使用GD库输出汉字的方法.分享给大家供大家参考,具体如下: 一.原理 PHP中的GD库支持中文,但是必须要以UTF-8格式的参数来进行传递.下面先说一下汉字的UTF-8编码的求得. 1. 用WORD2000或WINDOW 2000下的记事本编辑所要显示的汉字. 2. 把所编辑的文字存成格式为UTF-8格式的文件. 3. 用一个16进制的编辑器(如用PCTOOLS的EDIT功能)打开这个文件,这时会看到打开的文件里面有一些16进制的字符.一个汉字占三个字节,所以应该选择编辑汉字

随机推荐