Can’t interpolate: {{url}} error while assigning url to iframe ng-src

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

Updated: June 17, 2020 — 1:47 pm

1 Comment

Add a Comment
  1. Awesome! Its truly remarkable post, I have got
    much clear idea about from this post.

    My website :: CBD for Sale

Leave a Reply