In AngularJS you might received the following error while assigning $scope variable.
Error: [$interpolate:interr] Can’t interpolate: {{url}}
It is a common mistake that anyone can do in the beginning. Now we can learn some simple fixes for this issue. If you have done many trys in different scenarios just ignore it and simply follow my code.
The following code will output the Google map with dynamic Address.
var app = angular.module("sampleApp", []);
app.controller("googleMapCrl", ['$scope', '$sce', function ($scope, $sce) {
this.address = "Sacramento, CA,USA ";
$scope.trustAsUrl = function(url){
return $sce.trustAsResourceUrl(url)
}
}]);
<body ng-app="sampleApp">
<h1>Hello Plunker!</h1>
<div id="googleMAPCtrlDiv" ng-controller="googleMapCrl as gmc">
<div>Address Map: {{ gmc.address}}</div>
<iframe width="600" height="450" frameborder="0" style="border:0" ng-src="{{trustAsUrl('https://www.google.com/maps/embed/v1/place?key=AIzaSyBtAhJPJHuKJYDCIg75S2WPL78KrBcqNuc&q=' + gmc.address)}}"></iframe>
</div>
</body>
Here $sce.trustAsResourceUrl(url) is the important to note. $sce means Strict Contextual Escaping(SCE). SCE is a mode in which AngularJS $scope constrains bindings to only render trusted values.
It allows to assist in writing code in a ways those are (a) is a secure by default, and (b) makes auditing for security vulnerabilities such as XSS, clickjacking etc.
Here is the Plunkr url for the above issue.
https://plnkr.co/edit/4cEbZCNzXojKlDhAQdb8?p=info
Awesome! Its truly remarkable post, I have got
much clear idea about from this post.
My website :: CBD for Sale