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 ...
随机推荐
- SERCOS总线程序相关
SERCOS程序就是围绕主机发送MDT电报,伺服在下一个周期发送AT电报作为应答这个原则来实现的,这个过程是由控制字等控制实现的,读程序的时候如果忽略这点,可能在想程序从哪里读数据,在哪里写数据呢.. ...
- python科学计算和数据分析常用库
NumPy NumPy最强大的是n维数组,该库还包含基本的线性代数函数.傅立叶变换.随机函数和其他底层语言(如Fortran.C和C++)集成的工具. SciPy SciPy建立在NumPy基础上,它 ...
- 六、接上一个博客-ITK例子运行结果
一.程序介绍 该程序的主要思路如下: 二.程序参数 1-程序自己创建三维图像的时候 我自己计算得到的参数如下: 三维图像参数: 旋转参数: 光线投射法参数: 当我们输入参数: -v 得到程序的输出 ...
- CountDownLatch（倒计时计数器）使用说明 --并发
方法说明: public void countDown() 递减锁存器的计数,如果计数到达零,则释放所有等待的线程.如果当前计数大于零,则将计数减少.如果新的计数为零,出于线程调度目的, ...
- C++编译器优化技术：RVO、NRVO和复制省略
现代编译器缺省会使用RVO(return value optimization,返回值优化).NRVO(named return value optimization.命名返回值优化)和复制省略(Co ...
- 跨域问题，解决方案-Nginx反向代理
跨域问题,解决之道 跨域问题,在日常开发过程中,是一个非常熟悉的名词.今天的话题,结合我之前的项目场景,讨论下<跨域问题,解决之道>. 跨域是什么 跨域问题,是由于JavaScript出于 ...
- 【Unity游戏开发】性能优化之在真机上开启DeepProfile与踩坑
一.引子 最近马三入职了新公司,平时除了负责编辑器开发之外还要做一些游戏性能优化方面的工作.在这里首先给大家安利一下Unity官方的性能测试分析工具URP ,这个工具目前是免费,测试的过程中也不需要接 ...
- Python的生成器和生成器表达式
一,生成器和生成器表达式 什么是生成器,生成器实质就是迭代器,在python中有三种方式来获取生成器: 1. 通过生成器函数 和普通函数没有区别,里面有yield的函数就是生成器函数,生成器函数在执行 ...
- ASP.NET 页面控制
一.HTTPRequest对象封装客户端请求页面或提交表单时提供的信息 请求方法:get/post 参数名/值 Cookie 使用的语言二.Rquest对象常用方法与属性 属性: QueryStrin ...
- 哈希算法原理【Java实现】（十）
前言 在入学时,学校为我们每位童鞋建立一个档案信息,当然每个档案信息都对应档案编号,还有比如在学校图书馆,图书馆为每本书都编了唯一的一个书籍号,那么问题来了,当我们需要通过档案号快速查到对应档案信息或 ...