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 ...
随机推荐
- Linux之恢复误删除文件
前言每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有 bug.那么如果真的删除了不该删除的文件,比如数据库.日志或执 ...
- 升级python2.7至python3.7
最近在centos7下执行命令时,出现以下提示: DEPRECATION: Python 2.7 will reach the end of its life on January 1st, 2020 ...
- 11. java random类
一.random类使用 import java.util.Random; public class Demo{ public static void main(){ Random r = new Ra ...
- poj 3061 Subsequence 二分 前缀和 双指针
地址 http://poj.org/problem?id=3061 解法1 使用双指针 由于序列是连续正数 使用l r 表示选择的子序列的起始 每当和小于要求的时候 我们向右侧扩展 增大序列和 每当和 ...
- Spring 中的观察者模式
一.Spring 中观察者模式的四个角色 1. 事件(ApplicationEvent) ApplicationEvent 是所有事件对象的父类.ApplicationEvent 继承自 jdk 的 ...
- ASP.NET页面缓冲
整页缓存<% OutPutCache Duration=5 VaryByParam="none" %>Duration是缓冲时间 参数可以有多个 在varyByPara ...
- Linux系统彻底卸载MySQL数据库
一.首先查询系统是否安装了MySQL rpm -qa | grep -i mysql 输出结果表示,我安装的MySQL Server,Client都是5.6.44的,因为我系统支持的版本是要5.7+的 ...
- MySql Navicat可视化工具
下载链接 链接:https://pan.baidu.com/s/1ca5KbpCFc4UbcYkXZDu6aA 提取码:8nku 安装比较简单,选完安装路径,下一步即可 Navicat for MyS ...
- SpringCloud（四）：使用Feign实现声明式服务调用
一.Feign介绍Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign 注解和JAX-RS注解 ...
- cmdb项目-2
1.命令插件异常处理 + 日志采集 1)为了更清楚发送客户端收集信息的状态 ,优化返回api的数据 ,变为字典存储 {状态 错误信息 数据} ,因为每个插件的每种系统下都要这个返回值我们将他单独做成类 ...