angular ng-bind-html异常Attempting to use an unsafe value in
发布时间:2020-12-17 17:48:17 所属栏目:安全 来源:网络整理
导读:在angular中使用ng-data-html渲染dom时,遇到了一个Attempting to use an unsafe value in a safe context错误,官方给出的理由是‘试图在安全的上下文中使用不安全的值’。 导致此问题的实际原因是,返回数据中包含了html模板,angular会觉得在渲染数据中直
在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数据即可解决此问题了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |