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 ...
随机推荐
- sqlserver 筛选索引（filter index）在使用时需要注意的事项
sqlserver 的筛选索引(filter index)与常规的非筛选索引,加了一定的filter条件,可以按照某些条件对表中的字段进行索引,但是filter 索引在查询 使用上,并不等同于常规的索 ...
- linux添加磁盘分区做为swap分区
在部署oracle时,根据内存的不同,会对swap分区大小有不同要求,具体参考https://www.cnblogs.com/chxmtl/p/11672053.html 下面为具体操作步骤. 1.新 ...
- tomcat启停脚本
脚本存放目录 /etc/init.d/ #!/bin/bash # description: Tomcat8 Start Stop Restart # processname: tomcat8 # c ...
- cookie、localStorage 和 sessionStorage 的使用以及区别
localStorage 和 sessionStorage 的增删改查: 存储数据: sessionStorage.setItem('key', 'sessionStorage的值'); // 存储数 ...
- JavaScript-----12.对象
1. 对象 万物皆对象,但是对象必须是一个具体的事物.例如:"明星"不是对象,"周星驰"是对象:"苹果"不是对象"这个苹果&quo ...
- Idea中新建yml不显示叶子形状的原因
IntelliJ IDEA 2019.2.4 x64 (版本),不显示叶子形状,导致写配置无法自动提示(自动提示请安装插件)Spring Assistant 先看一下Editor--->File ...
- Sqlite-net 修改版 支持中文和CodeFirst技术
最近, 做的一个windows 桌面WPF程序, 需要数据库支持.尝试了 sql server 的开发版,使用EF , 效率太低.后来采用sqlite数据库,中间踩坑无数.但最终完美的解决了这些问题. ...
- js闭包理解案例-解决for循环为元素注册事件的问题
转发自http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 一.变量的作用域 要理解闭包,首 ...
- session购物车中的移除功能部分（学生笔记）
function onclick_remove(r) { if (confirm("确认删除么!此操作不可恢复")) { var out_momey = $(".out_ ...
- Spring MVC的注解二
概述 Spring从2.5版本开始引入注解,虽然版本不断变化,但是注解的特性一直被延续下来并不断进行扩展,这里就来记录一下Spring MVC中常用的注解,本文承接前文继续记录@PathVariabl ...