Question

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
http://errors.angularjs.org/1.6.1/$sce/unsafe
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:68:12
    at htmlSanitizer (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:18691:13)
    at getTrusted (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:18860:16)
    at Object.sce.(anonymous function) [as getTrustedHtml] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:19540:16)
    at ngBindHtmlWatchAction (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:25632:29)
    at Scope.$digest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:17814:23)
    at Scope.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:18080:24)
    at bootstrapApply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1841:15)
    at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4842:19)
    at doBootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1839:14)

这是我在下面的代码中得到的错误。

<!doctype html>
<html ng-app="parking">
<head>
<title>[Packt] Parking</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-sanitize.min.js"></script>
<script>
    var parking = angular.module("parking", []);
    parking.controller("parkingCtrl", function ($scope) {
        $scope.appTitle = "<b>[Packt] Parking</b>";
    });
</script>
</head>
<body ng-controller="parkingCtrl">
<h3 ng-bind-html="appTitle"></h3>
</body>
</html>

我是棱角分明的新手。你能告诉我这里我做错了什么吗？谢谢。

Answer 1

创建一个全局过滤器，注入$sce以从视图中的控制器绑定不安全的HTML。

＆＃13;

var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function ($scope) {
    $scope.appTitle = "<b>[Packt] Parking</b>";
});

parking.filter('safeHtml', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
});

＆＃13;

<html ng-app="parking">
<head>
<title>[Packt] Parking</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-sanitize.min.js"></script>
</head>
<body ng-controller="parkingCtrl">
<h3 ng-bind-html="appTitle | safeHtml"></h3>
</body>
</html>

＆＃13;

Answer 2

首先，您需要在控制器中注入$sce。然后，您必须指示Angular将您的内容信任为HTML，如下所示：

var parking = angular.module("parking", []);
    parking.controller("parkingCtrl", function ($scope, $sce) {
        $scope.appTitle = "<b>[Packt] Parking</b>";
        $scope.trustedAppTitle = $sce.trustAsHtml($scope.appTitle);
    });

然后你必须将HTML绑定到可信变量，如下所示：

<h3 ng-bind-html="trustedAppTitle"></h3>

总而言之，您的代码应该如下所示：

<!doctype html>
<html ng-app="parking">
<head>
<title>[Packt] Parking</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-sanitize.min.js"></script>
<script>
    var parking = angular.module("parking", []);
    parking.controller("parkingCtrl", function ($scope, $sce) {
        $scope.appTitle = "<b>[Packt] Parking</b>";
        $scope.trustedAppTitle = $sce.trustAsHtml($scope.appTitle);
    });
</script>
</head>
<body ng-controller="parkingCtrl">
<h3 ng-bind-html="trustedAppTitle"></h3>
</body>
</html>

试图在Angular js的安全上下文中使用不安全的值

2 个答案: