angular将html代码输出为内容的实例

在前端与后台的撕逼中，很大一部分是因为数据的问题。使用angular会遇到这样的问题，后台返回的数据不是自己想要的纯字符串，而是带有html标签及属性的，那么我们将它输出来后，在页面上就出现了带有标签的内容，很不优雅。那么找后台更改的话，又会引起议论撕逼大战，而且人家不一定有时间搭理你。这样的情况下，我们就要自己动手，丰衣足食了。

通常angular绑定数据有这样的方法，{{}}或者ng-bind =”,此时数据为带有html标签的数据的话，那么就输出为带有标签的数据，不友好。

如何更改呢？

方法一

要输出为不带html的内容，需要两步

1 使用$sce.trustAsHtml();方法将数据转为unwrapTrustedValue 数据。 

$scope.aaa = $sce.trustAsHtml("<h3>html代码</h3>");

2 ng-bind-html 输出

<div ng-bind-html='aaa'></div>

方法二 filter过滤器

基于$sce.trustAsHtml()的方法，构造过滤器来进行过滤。

angular.module('app',[]).filter("showAsHtml",function($sce){
 return funciton(input){
  retrun $sce.trustAsHtml(input);
 }
});

使用的时候直接在数据后加过滤器即可

<div ng-bind-html='bbb|showAsHtml'></div>

使用了$scr.trustAsHtml() 则展示的时候，必须使用ng-bind-htm=‘'的形式，而不能使用{{}}

以上这篇angular将html代码输出为内容的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解angular如何调用HTML字符串的方法

    详解angular如何调用HTML字符串的方法

    前面的文章我们介绍过angular6.0的数据绑定,也就是前面页面如何调用后台的数据,我们接触到了调用普通数据--如:调用产品详情{{post.content}}.在使用中,我们会发现,如果按原来的方式angular6.0调用的数据是HTML字符串,前台页面显示的依然是html字符串,而没有正常显示,如下图: 这显示不是我们想要的结果.那么,angular6.0如何调用HTML字符串数据呢? angular6.0提供了一个属性绑定来实现html字符串数据的绑定: <ul [innerHTML]=

  • 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

  • Angular4绑定html内容出现警告的处理方法

    前言 众所周知在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是.但是最近在Angular4绑定html内容的时候出现了警告,通过查找相关资料终于解决了,下面给同样遇到这个问题的朋友们分享下,话不多说了,来一起看看详细的介绍吧. 绑定html内容 如果用正常的方法去绑定的话,可能会出再这种警告 <div [innerHTM

  • angular将html代码输出为内容的实例

    在前端与后台的撕逼中,很大一部分是因为数据的问题.使用angular会遇到这样的问题,后台返回的数据不是自己想要的纯字符串,而是带有html标签及属性的,那么我们将它输出来后,在页面上就出现了带有标签的内容,很不优雅.那么找后台更改的话,又会引起议论撕逼大战,而且人家不一定有时间搭理你.这样的情况下,我们就要自己动手,丰衣足食了. 通常angular绑定数据有这样的方法,{{}}或者ng-bind =",此时数据为带有html标签的数据的话,那么就输出为带有标签的数据,不友好. 如何更改呢? 方

  • python3代码输出嵌套式对象实例详解

    我们都知道如果想让电脑运行更多的程序,就要增加它的配置才能带动.在之前的学习中,我们已经对函数的打印print有所了解,但是遇到更加复杂的对象,比如嵌套式的print的打印功能就不够用了. 有的小伙伴已经在寻找其他的函数,其实针对于这个问题,我们使用更高级的pprint就可以解决了,接下来用代码输出嵌套式对象给大家进行模拟. Python的默认print函数可以满足日常的输出任务,但如果要打印更大的.嵌套式的对象,那么使用默认的print函数打印出来的内容会很丑陋. 这个时候我们就需要pprin

  • django输出html内容的实例

    最近在学习django,于是就用django做了一个简单的网站,用来练手,具体功能就是从网上抓取数据,然后放到我的网站上面,但是遇到一个问题就是django无法输出html格式的内容,只能以字符串的形式输出: data = '<h1>hello world</h1>' <p>{{ data }}</p> 我们目的是输出的是: hello world 但是结果输出的是: <h1>hello world</h1> 在网上搜了好久,终于找到

  • angular.js分页代码的实例

    angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用. 先来看下效果图 实例代码 app.directive('pagePagination', function(){ return { rest

  • JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

    JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)

    JavaScript 输出 JavaScript 没有任何打印或者输出的函数. JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() 弹出警告框. 使用 document.write() 方法将内容写到 HTML 文档中. 使用 innerHTML 写入到 HTML 元素. 使用 console.log() 写入到浏览器的控制台. 使用 window.alert() 你可以弹出警告框来显示数据: <!DOCTYPE html>

  • Angular 实现输入框中显示文章标签的实例代码

    Angular 实现输入框中显示文章标签的实例代码

    很多网站发帖的时候标签输入框看起来像是在 <input> 元素中直接显示标签. 比如这种 一开始以为是把 <span> 放在 <input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现方式, 原来是用一个 <div> 把 <span> 和 <input> 包起来, 然后让 <div> 模仿出输入框的样式. 再给 <div> 加上eventListensor, 点击 <

  • python 将print输出的内容保存到txt文件中

    具体代码如下所示: import sys import os class Logger(object): def __init__(self, filename="Default.log"): self.terminal = sys.stdout self.log = open(filename, "a") def write(self, message): self.terminal.write(message) self.log.write(message) d

  • 使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码

    使用 Angular RouteReuseStrategy 缓存组件 Cache components with Angular RouteReuseStrategy RouteReuseStrategy provider 允许我们控制 Angular 路由和组件生命周期的行为. 当我们在组件间切换的时候,Angular都会销毁上一个组件,并且创建一个新的组件.在大多数情况下,我们可能不想让它这样工作,因为每次加载一个组件,可能会有很多类似HTTP请求一样的昂贵的操作. 这时候就需要RouteR

  • 关于python pycharm中输出的内容不全的解决办法

    很多时候我们会发现有的时候输出的结果特别多的时候,会在最后输出时用...代替,最后输出一个总长度,那要咋么弄咧? import pandas as pd # 设置显示的最大列.宽等参数,消掉打印不完全中间的省略号 # pd.set_option('display.max_columns', 1000) pd.set_option('display.width', 1000)#加了这一行那表格的一行就不会分段出现了 # pd.set_option('display.max_colwidth', 1

  • python程序输出无内容的解决方式

    问题缘由 某项目中使用python脚本方式将日志文件中的数据持续的转换格式输出到另一文件中以供其他日志分析应用使用.但是当后台运行采取重定向方式输出到某一文件时,发现并没有内容输出,命令如下: python xxx.py > xxx.log & 测试发现,当前台直接输出到终端时正常,使用后台运行重定向的方式输出到文件中时无法输出. 解决办法 发现是在程序运行时,输出有缓存,只有当程序运行结束或者缓冲区满后才会输出.因为程序是一致在运行的所以不可能等待程序结束在输出.并且要求是有实时性的所以等

随机推荐