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

Question

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

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)

Run Code Online (Sandbox Code Playgroud)

这是我用下面的代码得到的错误.

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Dra*_*scu 6

首先,您需要注入$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);
    });

Run Code Online (Sandbox Code Playgroud)

然后你必须将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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Saj*_*jal 6

创建一个全局过滤器，$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);
    };
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，4 月前
查看次数：	8342 次
最近记录：	8 年，4 月前