angularJS1笔记-(17)-ng-bind-html指令

2023-05-16

angular不推荐大家在绑定数据的时候绑定html,但是如果你非要这么干也并不是不可以的。举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>

</head>
<body ng-app ng-init="username='<h1>shit</h1>'">
<!--ng-bind指令在绑定的值包含html时会转义,为了安全(跨站脚本攻击)-->
<strong ng-bind-html="username"></strong>

<script src="app/bower_components/angular/angular.js"></script>

</body>
</html>

  写这样的一段代码在浏览器运行:

      会看到错误信息:

  看意思是在一个安全的环境中使用了不安全的值导致的,这个时候我们需要引入angular的一个依赖包 angular-sanitize:

引入完成后我们导入项目,然后在模块中写明依赖:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>

</head>
<body ng-app="myApp" ng-init="username='<h1>shit</h1>'">
<!--ng-bind指令在绑定的值包含html时会转义,为了安全(跨站脚本攻击)-->
<strong ng-bind-html="username"></strong>

<script src="app/bower_components/angular/angular.js"></script>
<script src="app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script>
    //使用自定义的模块才可以依赖别的包里面定义模块 angular定义的默认模块没有任何依赖
    angular.module('myApp', ['ngSanitize'])
</script>
</body>
</html>

  此时运行就可以看到正确结果ngSanitize的作用是让html不转义:

 

转载于:https://www.cnblogs.com/yk123/p/6953338.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angularJS1笔记-(17)-ng-bind-html指令 的相关文章

  • 如何使用固定宽度的卡片制作卡片组?

    我想做一个响应式的卡牌 https getbootstrap com docs 4 0 components card card decks使用引导4固定宽度卡片 https getbootstrap com docs 4 0 compon
  • 如何使用 Angular 1.5 中的组件为每个页面设置标题

    我最近开始使用 Angular 1 5 组件 我的应用程序中有多个页面 所以我决定创建一个
  • Internet Explorer 不渲染从 JQuery ajax 帖子返回的 html

    我有一个带有输入框的页面 其 onkeyup 根据输入的内容 搜索字段 触发 JQuery ajax 帖子 ajax 调用回发的 html 应该填充页面上的另一个 div 这是 jquery ajax 帖子 var o me results
  • 该脚本在 IE 中不起作用。我该如何修复它?

    有一个脚本可以根据用户的显示器屏幕分辨率更改页面模板 但是 它在 IE 中不起作用 请告知如何修复它 table align center tr td head td tr tr td nbsp td td nbsp td td nbsp
  • 裁剪响应式全宽图像

    我必须剪辑跨越整个宽度的图像 以下事情对我不起作用 剪辑 这需要绝对位置 因此块元素不会堆叠在下面 背景位置 缩放时无法正确剪辑 放大时剪辑的部分会增加 反之亦然 包装器 包装器高度取决于浏览器宽度 因此其值应该是动态的 我使用了 seti
  • 如何在 CSS 中选择纯 HTML 文本?

    你们有人知道如何在 CSS 中选择纯 HTML 文本吗 我有以下结构 div p class caption caption1 p div class tabs div class moving bg div p class text ta
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • 通过按 Enter 键提交表单而不使用提交按钮

    好吧 我试图通过按 Enter 键来提交表单 但不显示提交按钮 如果可能的话 我不想涉足 JavaScript 因为我希望一切都能在所有浏览器上运行 我知道的唯一 JS 方式是使用事件 现在的表格看起来像这样
  • 在html页面中使用jquery显示json数据

  • 有没有办法同步ajax调用

    这可能是一个微不足道的问题 但我想知道是否有办法以某种方式知道最后一个 ajax 调用何时完成 假设我有 3 个异步 ajax 调用 ajax type GET datatype json url
  • 重新加载页面时删除哈希值?

    我使用哈希来切换我的图像滑块 当我重新加载页面并且哈希值设置为 e h 3 没有图片 当图库在几秒钟后自动滑动时 它显示下一个 所以几秒钟内什么也没有 有没有办法在加载页面时检查哈希并将其删除 我只想关心那些用散列为页面添加书签的人 问候
  • django:如何在模板html页面内进行计算?

    您好 我正在使用缩略图插件来获取图像的宽度和高度 现在我想使用从缩略图插件获取的高度来定义 img 标签的填充 例如 img style padding top img height 2 src 但是我在这里遇到错误 django不允许这样
  • 全高全宽 CSS 布局

    我正在寻找一种方法来创建具有 5 个区域的纯 CSS 无 JavaScript 布局 如下所示 H A B C F
  • HTML5 文件 API 和 AJAX 上传分块问题

    我编写了一个带有单独进度的拖放多个文件上传等 除了一件事之外 它工作得非常好 上传较大文件时 有时浏览器会锁定 直到上传完成 我认为这是因为该文件存储在浏览器的内存中并占用了浏览器可用的所有资源 我想知道 是否可以逐段读取文件并在读取时通过
  • 从字节数组设置 img src

    我需要设置img src我在对象中拥有的字节数组的属性 img
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • 禁用复选框上的输入

    需要在取消选中该复选框时禁用输入 并在选中该复选框时启用它 我的代码是这样的 div class y div
  • 如何将MathJax公式转换为img

    Mathjax 现在在我的项目中运行良好 但有一个问题 有没有办法将MathJax的公式 纯html和css 转换成img文件 我可以保存 MathJax 可以配置为生成 SVG 看http docs mathjax org en late
  • 我自己的而不是从其他网站借用的图像的正确 img src 是什么?

    在我的计算机上 保存 css 和 html 文件的文件夹还包含一些我想要插入到 html 中的图像 如果我从其他网站借用图像 我知道如何获取图像的 URL 如何获取文件夹中但尚未出现在互联网上的图像的 URL 我是否必须将图像上传到其他网站

随机推荐

  • Android IOS WebRTC 音视频开发总结(十五)-- 培训课程大纲

    Android IOS WebRTC 音视频开发总结 xff08 十五 xff09 培训课程大纲 最近在给公司做内部培训 xff0c 主要是关于即时通讯和移动视频通话 xff0c 包括android与android xff0c ios与io
  • Docker 1.12 : 使用 Swarm 的新姿势

    本文首发于我的博客 原文链接 xff1a Docker 1 12 新特性 Docker1 12 版本做出了很大的改动 xff0c 特别是增加了对 swarm 的原生支持 xff0c 下面对新版的使用做一个总结 xff0c 供大家查阅 doc
  • 用CSS写一个简单的幻灯片效果页面

    这里是修真院前端小课堂 xff0c 每篇分享文从 背景介绍 知识剖析 常见问题 解决方案 编码实战 扩展思考 更多讨论 参考文献 八个方面深度解析前端知识 技能 xff0c 本篇分享的是 xff1a 用CSS写一个简单的幻灯片效果页面 1
  • Go程序Windows运行时不显示cmd窗口

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 非常简单 xff0c 编译时候加参数 go build ldflags 61 34 H windowsgui 34 转载于 https my oschina net pok
  • Python3 创建虚拟环境

    目的 使用虚拟环境是为了隔离不同项目之间的Python库 创建虚拟环境 Python3 内置了venv模块 xff0c 首先创建项目目录 xff0c 进入目录后 xff0c 执行 python3 m venv venv 激活虚拟环境 在开始
  • Ubuntu18.04LTS 文件系统简记

    Ubuntu18 04LTS 文件系统 了解Linux文件系统是熟悉掌握使用Linux系统的第一步 首先安装名为tree的工具 sudo apt install tree 运行 tree help 查看tree命令的详细用法 运行 tree
  • windows下nvm安装node之后npm命令找不到问题解决办法

    主要关键解解决办法 xff1a 61 61 61 适 用于所有东西的安装 安装有关环境配置类的软件及其他 xff0c 一般情况下切记不要安装到c盘programfiles下 xff0c 否则会出现各种问题的报错 xff01 xff01 xf
  • [问题2014S14] 复旦高等代数II(13级)每周一题(第十四教学周)

    问题2014S14 设 V 为酉空间 证明 不存在 V 上的非零线性变换 varphi 使得对 V 中任一向量 v 均有 varphi v v 61 0 注 本题是复旦高代教材 P326 习题 9 1 5 的推广
  • 8B10B编解码及FPGA实现

    概述 在使用ALTERA的高速串行接口时 xff0c GXB模块里硬件实现了8B10B编码 xff0c 用户只是 傻瓜 式的使用 xff0c 笔者也一直没有弄清楚 网上搜索了一些学习资料 xff0c 结合参考文献希望能够对其进行消化 另外
  • 零碎记录- spring security oauth2 资源服务器中设置放行路径

    在资源服务器配置类中重写configure方法 xff0c 添加放行信息 使用了 64 EnableResouceServer xff0c 且继承了ResourceServerConfigurerAdapter的类作为资源服务器配置信息类
  • Golang 新手可能会踩的 50 个坑

    译文 xff1a Golang 新手可能会踩的 50 个坑 原文 xff1a 50 Shades of Go Traps Gotchas and Common Mistakes 翻译已获作者授权 xff0c 转载请注明来源 不久前发现在知乎
  • 手把手教你使用TF服务将TensorFlow模型部署到生产环境 ...

    介 绍 将机器学习 xff08 ML xff09 模型应用于生产环境已成为一个火热的的话题 许多框架提供了旨在解决此问题的不同解决方案 为解决这一问题 xff0c 谷歌发布了TensorFlow xff08 TF xff09 服务 xff0
  • Centos/Linux下如何查看网关地址/Gateway地址

    Centos Linux下如何查看网关地址 Gateway地址 xff1f Linux下查看网关的命令还是很多的 xff0c 不过如果IP是DHCP获取 xff0c 那么有些命令是不适用的 xff0c 当然也有通用的查询网关命令 1 ifc
  • 教你Java生成文件时怎么设置编码格式

    OutputStreamWriter允许用户指定编码方式 xff0c 代码为 xff1a FileInputStream fis 61 new FileInputStream 34 文件路径 34 xff1b OutputStreamWri
  • One input and More output use 'tee'

    2008 05 22 In preparation for my Luma media player I wanted to create a simple audio player with visualization Based upo
  • 简单的任务调度(自整理)

    为什么80 的码农都做不了架构师 xff1f gt gt gt 任务调度 使用 Quartz 框架实现 1 8 6 的版本 开源框架 什么是任务调度 xff1a 即是某个时间点做某件时间 xff01 核心有是什么 xff1a 以时间为关注点
  • Laravel5.5集成七牛云上传、管理(删除、查询)

    一 为什么使用七牛云存储 1 使用七牛带宽和CDN xff0c 速度快 xff0c 不占用开发者服务器 2 支持图片任意格式 任意分辨率自动生成 xff0c 可以用来做图片服务器 3 小流量免费 xff1a 存储空间 10GB xff0c
  • centos为用户添加sudo功能

    su chmod a 43 w etc sudoers vim etc sudoers 找到root ALL 61 ALL ALL这行 复制出新的一行 xff0c 并且将root改为daniel xff08 当前用户名 xff09 chmo
  • Reverse Linked List

    本题是反转一个单链表 xff0c 题目提示使用迭代和递归两种方式 xff0c 属于比较基础的题目 一 迭代方式 xff1a 总体思路是从左到右遍历链表结点 xff0c 依次反转连接关系 每次处理相邻的两个结点 xff0c 从 lt None
  • angularJS1笔记-(17)-ng-bind-html指令

    angular不推荐大家在绑定数据的时候绑定html 但是如果你非要这么干也并不是不可以的 举个例子 xff1a lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt me