Menu
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)
This is the error I get with the code below.
<!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>
I am new to angular js. Can you please tell me what I am doing wrong here? Thank you.
796
Create a global filter injecting $sce to bind unsafe HTML from controller in view.
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>First of all, you need to inject $sce in your controller. Then you have to instruct Angular to trust your content as HTML, like so:
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function ($scope, $sce) {
$scope.appTitle = "<b>[Packt] Parking</b>";
$scope.trustedAppTitle = $sce.trustAsHtml($scope.appTitle);
});
And then you have to bind the HTML to the trusted variable, like so:
<h3 ng-bind-html="trustedAppTitle"></h3>
All in all, your code should look like this:
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
