angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理

风晓 2024-01-03 00:21:40  52819 赞同 0 反对 0

分类：资源

在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数据即可解决此问题了。

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

WPS使用技巧——诊断工具提示云服务加载异常 2023-12-16 51893 浏览
如您无法登录，且诊断工具提示「云服务加载异常[2]」，可能是因为插件更新不完整导致。您可以尝试以下方式解决： 1）按下键盘的win+r 键，调出【运行】对话框； 2）输入%appdata%\kingsoft\wps\addons\pool\win-i386 按回车键； 3）找到qing_1.0.xxx开头的文件夹（例如：qing_1.0.1.184、qing_1.0.1.164等）删除； 4）重启电脑。
两台客户端同时挂载NFS，分别对其中的同一个文件进行dd写入或读取时，会出现读取速度异常变慢的情况　 2023-12-25 52103 浏览
两台客户端同时挂载NFS，分别对其中的同一个文件进行dd写入或读取时，会出现读取速度异常变慢的情况　
激活界面报错，如“授权文件异常” 　 2023-12-25 53244 浏览
激活界面报错，如“授权文件异常” 　
输入错误激活码导致系统服务期限异常 2023-12-25 49213 浏览
输入错误激活码导致系统服务期限异常
mac地址漂移问题，导致网络异常 2023-12-26 49762 浏览
mac地址漂移问题，导致网络异常
银河麒麟桌面操作系统V10SP1（X86）【蓝牙设置界面显示蓝牙适配器异常】问题解决方法 2024-02-20 51584 浏览
鼠标点击桌面左下角“开始菜单->设置->设备->蓝牙”，打开蓝牙设置界面后，显示：蓝牙适配器异常。
子父类继承中的异常 2023-12-28 52266 浏览
子父类继承中的异常。
自定义异常 2023-12-28 53084 浏览
对于除数是负数也视为错误的。0也是错误的。都是无法进行运算的。那么这个异常怎么定义呢？自定义异常的类首先要继承一下 Exception类。然后自定义一下异常的信息。然后需要实现的类的方法去throws 这个自定义异常的类名就可以了
多异常处理 2023-12-28 53808 浏览
java中的多异常处理
Java异常 2023-12-28 52065 浏览
Exception 除0异常等等。对于Exception 可以使用针对性的处理方式进行处理，常见的还有多态的时候父类对象的引用转子类的时候，会报ClassCast异常，类转换异常。

angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理

相关资源

关注我们