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 ...
随机推荐
- 2019 DevOps 技术指南
原文链接:https://hackernoon.com/the-2018-devops-roadmap-31588d8670cb 原文作者:javinpaul 翻译君:CODING 戴维奥普斯 写在前 ...
- 教你如何在5分钟轻松部署squid正向代理
正向代理是一个位于客户端和原始服务器(origin server)之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原始服务器转交请求并将获得的内容返 ...
- mssql sqlserver sql对使用逗号分隔的字符串 转换为数据表的另类方法实现
转自:http://www.maomao365.com/?p=10739 摘要: 下文讲述在sqlserver 对逗号分隔的字符串转换为数据表的另类方法实现,如下所示: 实验环境:sql server ...
- centos查询目标文件文件所在位置
之前有试过whereis这种语法但是查询文件不大理想.然后找到了下边这种方式可以很好的查询目标文件的位置 #在根目录 /下查找所有叫nginx的文件 find / -name nginx
- C语言基本数据类型的转换
变量的数据类型是可以转换的.转换的方法有两种,一种是自动转换,一种是强制转换.自动转换发生在不同数据类型的量混合运算时,由编译系统自动完成.自动转换遵循以下规则:1) 若参与运算量的类型不同,则先转换 ...
- 字典树(Trie)详解
详解字典树(Trie) 本篇随笔简单讲解一下信息学奥林匹克竞赛中的较为常用的数据结构--字典树.字典树也叫Trie树.前缀树.顾名思义,它是一种针对字符串进行维护的数据结构.并且,它的用途超级广泛.建 ...
- win10系统怎么设置软件开机启动
win10开机自动启动软件设置教程: 1:在windows10桌面,右键点击桌面左下角的开始按钮,在弹出的菜单中选择运行菜单项. 2:这时就会打开windows10的运行窗口,在窗口中输入命令shel ...
- Git实用指南
个人整理的一些Git概念和命令,可以速查或者快速解决某些方面的问题 一.精简入门 1.克隆仓库 克隆仓库会下载仓库完整的文件.分支和历史记录 git clone [<options>] [ ...
- python通过多线程并获取返回值
以下是多线程获取返回值的一种实现方式 # -*-coding:utf-8-*- from time import ctime, sleep import threading import numpy ...
- Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided.
这个报错是因为在浏览器上开启了手机模拟调试.Web SDK 不支持手机模拟调试的.