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

前面的文章我们介绍过angular6.0的数据绑定,也就是前面页面如何调用后台的数据,我们接触到了调用普通数据——如:调用产品详情{{post.content}}。在使用中,我们会发现,如果按原来的方式angular6.0调用的数据是HTML字符串,前台页面显示的依然是html字符串,而没有正常显示,如下图:

这显示不是我们想要的结果。那么,angular6.0如何调用HTML字符串数据呢?

angular6.0提供了一个属性绑定来实现html字符串数据的绑定:

这时,产品详情页的数据已正常显示——图片文字都能正常显示出来。而这时,又出现一个问题,在页面控制台会有警告提示:WARNING: sanitizing HTML stripped some content  如下图:

页面能正常输出显示,可见这个警告对页面不影响。如果不介意,倒是可以忽略不计。但这对于我们开发者来说,毕竟不太如意,肯定是哪儿有问题呀。

这啥会出现这种情况?这是因为angular的保护措施,防止xss攻击。其实可以不不管它,毕竟不是错误。如果不想看到这种警告信息,可以把产品详情单独出来进行解析:

第一步:引入DomSanitizer

第二步:通过DomSanitizer来解析产品详情,并赋值给一个变量属性 post_content;

第三步:前台调用时,用innerHTML属性绑定这个post_content变量

通过这几部,问题解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2018-06-29

问题:

在angularjs中,想在文本框中,验证用户输入的字符串是否为日期时间. 刚开始时,Insus.NET想到的是正则,这只是验证到日期与时间的格式是否正确而已,而对于2月最后一天或是30或是31号,还是无能为力. 因此,Insus.NET想使用angularjs的自定义指令来验证解决此问题. 在ASP.NET MVC的项目中,创建一个控制器,并创建一个Action: 控制器源代码: using System; using System.Collections.Generic; using Sys

本文实例讲述了C#验证用户输入信息是否包含危险字符串的方法.分享给大家供大家参考.具体分析如下: 这个C#函数可以用于表单输入数据的后端验证,判断用户是否提交了一些sql相关的危险注入字符 /// /// 检测客户输入的字符串是否有效,并将原始字符串修改为有效字符串或空字符串 /// 当检测到客户的输入中有攻击性危险字符串,则返回false,有效返回true. /// ///

经常需要对用户输入的数据在插入数据库或者判断之前做Trim处理,针对每个ViewModel的字段各自做处理是我们一般的想法.最近调查发现其实也可以一次性实现的. MVC4.6中实现方式 1,实现IModelBinder接口,创建自定义ModelBinder. public class TrimModelBinder : IModelBinder { public object BindModel(ControllerContext controllerContext, ModelBindingC

本文实例讲述了Javascript与PHP验证用户输入URL地址是否正确的方法,分享给大家供大家参考.具体方法如下: 1.javascript检测URL地址有效性: 复制代码 代码如下:

今天这个例子是 用来验证用户输入的参数的合法性的,程序并不复杂,如下所示: #!/bin/sh # validAlphaNum - Ensures that input consists only of alphabetical # and numeric characters. validAlphaNum() { # Validate arg: returns 0 if all upper+lower+digits, 1 otherwise # Remove all unacceptable

问题描述 很多同学跟我一样,都是刚开始接触java,可能从c语言突然转为java语言,有些跟我一样手足无措,那怎么获取用户输入的字符串! 如下示列: import Java.util.Scanner; //导入输入类   public static void main(String[] args) {      //创建输入对象   Scanner sc=new Scanner(System.in);      //获取用户输入的字符串   String str=null;   System.o

实例如下所示: function isDate(dateString){ if(dateString.trim()=="")return true; var r=dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); if(r==null){ alert("请输入格式正确的日期\n\r日期格式:yyyy-mm-dd\n\r例 如:2008-08-08\n\r"); return false; } var

本文实例讲述了Java实现字符串解析为日期时间的方法.分享给大家供大家参考,具体如下: Java版本:1.8开始 import java.time.LocalDate; import java.time.LocalDateTime; /** * Created by Frank */ public class DateParse { public static void main(String[] args) { String armisticeDate = "1914-11-11";

后台Java代码[验证码生成] /** * 随机生成6位随机验证码 */ public static String createRandomVcode(){ //验证码 String vcode = ""; for (int i = 0; i < 6; i++) { vcode = vcode + (int)(Math.random() * 9); } return vcode; } 后台Java代码[使用验证码并将验证码保存到session里面] String authCode

我们可以根据onkeydown事件的event.keyCode即是ASCII Chart来判断字符或数字等.相关键盘key对应的ASCII码:  参考下面JavaScript代码: 复制代码 代码如下:

angular字符串转成html,详解angular如何调用HTML字符串的方法相关推荐

  1. new Date将字符串转化成日期格式 兼容IE,ie8如何通过new Date将字符串转化成日期格式,js中如何进行字符串替换, replace() 方法详解

    new Date将字符串转化成日期格式 兼容IE,ie8如何通过new Date将字符串转化成日期格式,js中如何进行字符串替换, replace() 方法详解 //获得年月日时分秒 //传入日期// ...

  2. C#-Home / 详解Asp.Net Sql数据库连接字符串

    C#-Home / 详解Asp.Net Sql数据库连接字符串 2010-04-18 22:00 281人阅读 评论(0) 收藏 举报 1.连接数据库文件 <add name="Loc ...

  3. [转载] python 遍历字符串 字符_python 遍历字符串(含汉字)实例详解

    参考链接: Python字符串| rfind python 遍历字符串(含汉字)实例详解 python 遍历字符串(含汉字)实例详解 s = "中国china" for j in ...

  4. python 遍历字符串 字符_python 遍历字符串(含汉字)实例详解

    python 遍历字符串(含汉字)实例详解 python 遍历字符串(含汉字)实例详解 s = "中国china" for j in s: print j 首先一个,你这个'a'是 ...

  5. linux中替换命令详解,linux中sed命令字符串替换的用法详解

    Linux系统中sed命令可以将字符串批量替换,省去了很多麻烦,下面由学习啦小编为大家整理了linux系统中sed命令字符串替换的用法详解,希望对大家有帮助! linux中sed命令字符串替换的用法详 ...

  6. char数组反转java_java 字符串反转的实例详解

    java 字符串反转的实例详解 1.new StringBuffer("abcde").reverse().toString(); 2.通过char数组进行转换, 代码如下 pac ...

  7. python3 format函数_Python学习教程:Python3之字符串格式化format函数详解(上)

    Python学习教程:Python3之字符串格式化format函数详解(上) 概述 在Python3中,字符串格式化操作通过format()方法或者f'string'实现.而相比于老版的字符串格式化方 ...

  8. C#字符串常见操作总结详解

    C#字符串常见操作总结详解 本篇文章是对C#中字符串的常见操作进行了详细的总结介绍,需要的朋友参考下 (1)取字符串长度       <string>.Length; (2)字符串转为比特 ...

  9. format函数_Python学习教程:Python3之字符串格式化format函数详解(上)

    Python学习教程:Python3之字符串格式化format函数详解(上) 概述 在Python3中,字符串格式化操作通过format()方法或者f'string'实现.而相比于老版的字符串格式化方 ...

最新文章

  1. 未能从程序集 XX加载类型XXX的错误解决方法(借以提醒NHibernate使用者)
  2. 在 Docker 中运行 MySQL:多主机网络下 Docker Swarm 模式的容器管理
  3. python基础、print,input,if判断等
  4. [读书笔记] 美的历程
  5. CentOS 架设DHCP服务
  6. 采用MATLAB的DSP调试方法
  7. 对话乔会君丨两年服务1700家企业,洪泰智造如何锻造下一个独角兽?
  8. 计算机主板自动重启,电脑开机后自动重启,详细教您电脑开机后自动重启如何解决...
  9. 微服务守护神-Sentinel-降级规则
  10. [知乎]如何做到像使用 LaTeX 那样“优雅”地使用 Word?
  11. JZ4 重建二叉树--java实现
  12. ipad文件APP连接服务器,是时候认识一下 iPad 的文件管理了
  13. Android 渐变色背景
  14. 微信小程序●云开发部署攻略
  15. 《量化投资策略如何现额益简及PDF电子书下载
  16. 使用Fiddler抓取微信小程序二维码请求地址
  17. 第三方支付平台漏洞多 消费者1个月内被19次盗刷
  18. 小菊的语义分割2——数据集的制作(一): ISPRS_Potsdam遥感图像数据集
  19. UVALive 4997 ABCD Tiles --DFS
  20. 专科计算机ppt论文,计算机应用技术专业毕业论文PPT详解.ppt

热门文章

  1. 带有Java和Axis2的JSON Web服务
  2. php mysql study_PHPstudy升级mysql数据库
  3. 如何取消高亮显示重复项_如何将重复数据突出显示?
  4. MacBook如何快速显示桌面
  5. android 多语言不起作用,Android本地化语言环境不起作用,所有区域代码都存在问题...
  6. mhd格式三维图像显示_给你的家乡做个三维地图模型,满满的成就感,快来学习下...
  7. android json 斜杠,Android中Json数据去掉斜杠
  8. 【安卓开发 】Android初级开发(四)ListView
  9. LeetCode 371 两个整数之和
  10. Android接入热敏打印机,Android 关于佳博和汉印蓝牙热敏打印机开发