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

  • 相关阅读:
    java中的subList
    值传递和引用传递
    java程序中有异常处理和没有异常处理的区别
    正则表达式
    poj 3187 三角数问题
    poj 2718 切数问题 穷竭搜索
    ACM 广度优化搜索算法总结
    poj 3669 火星撞地球问题 bfs算法
    poj 2251 三维地图最短路径问题 bfs算法
    ACM 深度优化搜索算法小总结
  • 原文地址:https://www.cnblogs.com/echolun/p/10838960.html
Copyright © 2011-2022 走看看