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

最新推荐文章于 2022-05-31 14:39:07 发布

weixin_30950607

最新推荐文章于 2022-05-31 14:39:07 发布

阅读量597

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/echolun/p/10838960.html

版权

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

转载于:https://www.cnblogs.com/echolun/p/10838960.html

weixin_30950607

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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服务的t...
复制链接

扫一扫