angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理
在angular中使用ng-data-html渲染dom时，遇到了一个Attempting to use an unsafe value in a safe context错误，官方给出的理由是‘试图在安全的上下文中使用不安全的值’。
导致此问题的实际原因是，返回数据中包含了html模板，angular会觉得在渲染数据中直接插入html不安全。
我们可以通过angular内置的$sce服务的trustAsHtml方法对不安全的数据添加信任。
看个例子：
HTML：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body ng-controller="myCtrl as vm">
<ul>
<li ng-repeat="item in vm.testData">
<span ng-bind-html="item.text"></span>
</li>
</ul>
<script src="modules/angular.js"></script>
<script src="demo.js"></script>
</body>
</html>
JS:
angular.module('myApp', [])
.controller('myCtrl', ['$sce', function ($sce) {
let vm = this;
vm.testData = [{
text: '<b>测试1</b>'
},
{
text: '<b>测试2</b>'
}
];
vm.testData.forEach(ele => {
ele.text = $sce.trustAsHtml(ele.text);
});
}]);
测试数据中的text包含了html，通过内置$sce.trustAsHtml()方法处理text数据即可解决此问题了。
angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理的更多相关文章
- angular代码分析之异常日志设计
angular代码分析之异常日志设计 错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制,在程序执行发生问题的条件下,异常会在中断程序执行,同时会沿着代码的执行路径一步一步的向上抛出异常,最 ...
- 异常：Caused by: java.lang.NoClassDefFoundError: org/springframework/web/context/WebApplicationContext
说明项目没有加载jar包 异常:Caused by: java.lang.NoClassDefFoundError: org/springframework/web/context/WebApplic ...
- angular ng build --prod 打包报错解决方案
使用以下代码 就不报错了 ng build --prod --no-extract-license 打包命令 使用以下代码 就不报错了 ng build --prod --no-extrac ...
- angular ng指令
1.指令 ng-app,ng- 都是angular的指令系统ng-app: ng-app是angular的初始化,一个页面只能有一个ng-app,位置不限制.在页面上加入了这个执行,那么从当前的元素以 ...
- flutter SnackBar异常Another exception was thrown: Scaffold.of() called with a context that does not contain a Scaffold
代码如下: import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Returning Da ...
- flutter dialog异常Another exception was thrown: Navigator operation requested with a context that does not include a Navigator
我在使用flutter里的对话框控件的时候遇到了一个奇怪的错误 Another exception was thrown: Navigator operation requested with a c ...
- Angular - - $sce 和 $sceDelegate
$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...
- 利用angular结合translate为项目实现国际化
前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...
- angular源码分析：angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
随机推荐
- 如何使用 CODING 实践 DevOps 全流程
你好,欢迎使用 CODING!这份最佳实践将帮助你通过 CODING 研发管理系统来更好地实践 DevOps 流程. DevOps 的本质是打破各个部门之间的隔阂,打通企业的前中后台,推进跨部门协作. ...
- web项目的初始搭建和intellij的tomcat的配置
点击web application
- ssdb make 失败 autoconf required
ERROR! autoconf required! install autoconf first Makefile:4: build_config.mk: No such file or direct ...
- 如何将pyqt5的qt-designer设计出来的 .ui 和 .qrc 文件转化成 .py 文件
一.pyrcc5的使用 1.1 作用 将 .qrc 资源文件转换成py文件,并在主程序中通过 import 引入 1.2 资源文件编写说明 创建一个icon.qrc,代码如下: <RCC> ...
- 检测服务器是否开启重协商功能（用于CVE-2011-1473漏洞检测）
背景 由于服务器端的重新密钥协商的开销至少是客户端的10倍,因此攻击者可利用这个过程向服务器发起拒绝服务攻击.OpenSSL 1.0.2及以前版本受影响. 方法 使用OpenSSL(linux系统基本 ...
- 【cf961G】G. Partitions（组合意义+第二类斯特林数）
传送门 题意: 给出\(n\)个元素,每个元素有价值\(w_i\).现在要对这\(n\)个元素进行划分,共划分为\(k\)组.每一组的价值为\(|S|\sum_{i=0}^{|S|}w_i\). 最后 ...
- 使用hutool进行二维码制作
2.在IDEA中使用代码块生成二维码
- Django回顾--配置文件
""" Django settings for meiduo_mall project. Generated by 'django-admin startproject' ...
- JavaWeb中验证码校验的功能实现
后台生成验证码工具方法 /* * 设置图片的背景色 */ public static void setBackGround(Graphics g, int WIDTH, int HEIGHT) { / ...
- JPA连接Mysql数据库时提示：Table 'jpa.sequence' dosen't exisit
场景 在使用JPA连接Mysql数据库进行数据持久化时提示: Table 'jpa.sequence' dosen't exist 注: 博客主页: https://blog.csdn.net/bad ...