尝试在 Angular js 的安全上下文中使用不安全的值答案

【问题标题】：Attempting to use an unsafe value in a safe context on Angular js尝试在 Angular js 的安全上下文中使用不安全的值
【发布时间】：2017-05-22 08:44:58
【问题描述】：

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>

我是 Angular js 的新手。你能告诉我我在这里做错了什么吗？谢谢你。

【问题讨论】：

AngularJS: How to resolve "Attempting to use an unsafe value in a safe context"?的可能重复

标签： angularjs

【解决方案1】：

首先，您需要在控制器中注入$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>

【讨论】：

ReferenceError: $sce 未定义。这就是我得到的。我应该把它放在哪里？
我编辑了代码，忘记在最后一个代码sn-p中注入$sce。
我明白了。谢谢..parking.controller("parkingCtrl", function ($scope, $sce) {

【解决方案2】：

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

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);
    };
});

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

【讨论】：