zoukankan      html  css  js  c++  java
  • 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数据即可解决此问题了。

  • 相关阅读:
    网页日历显示控件calendar3.1
    切换“使用被动式FTP”
    href="javascript:xxx(this);"和onclick="javascript:xxx(this);"的区别
    CSS布局--上中下布局(上下固定,中间自适应)
    css字体颜色动画
    怎么让jQuery支持swipe事件
    html 5 canvas
    javascript面向对象
    WEB相关存储方式
    angularjs
  • 原文地址:https://www.cnblogs.com/echolun/p/10838960.html
Copyright © 2011-2022 走看看