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

時間 2019-12-09

標籤 angular bind html 異常 attempting use unsafe value safe context 處理欄目 AngularJS 简体版

原文原文鏈接

在angular中使用ng-data-html渲染dom時，遇到了一個Attempting to use an unsafe value in a safe context錯誤，官方給出的理由是‘試圖在安全的上下文中使用不安全的值’。html

致使此問題的實際緣由是，返回數據中包含了html模板，angular會以爲在渲染數據中直接插入html不安全。安全

咱們能夠經過angular內置的$sce服務的trustAsHtml方法對不安全的數據添加信任。app

看個例子：dom

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:ui

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數據便可解決此問題了。this

相關標籤/搜索