How to use AngularJS's scope values to generate custom html tag's attribute

Question

I am trying to embed a google map's iframe to my project, one per restaurant. The problem is that if the value of the addres is in:

$scope.restaurant.address

And I have to insert this code:

        <iframe width="450" height="250"
       src="https://www.google.com/maps/embed/v1/place?key=MY_KEY&q={{restaurant.address}}">
       </iframe>

{{restaurant.address}} is not correctly interpreted, and when the link is generated instead of the proper address, {{restaurant.address}} appears.

Any clue? Any help would be appreciated, thanks in advance!

have you tried ngSrc?

Brian Lewis
– Brian Lewis

2014-04-25 21:06:04 +00:00
Commented Apr 25, 2014 at 21:06 — Brian Lewis
– Brian Lewis, Commented Apr 25, 2014 at 21:06

Brian Lewis · Accepted Answer · 2014-04-25 21:55:21Z

2

Try something like this:

app.controller('SomeController', function($scope, $sce){
    $scope.restaurant.address = '1313 Mockingbird Ln.';
    $scope.url = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?key=MY_KEY&q=" + $scope.restaurant.address);
});

HTML:

<iframe width="450" height="250" ng-src="{{url}}"></iframe>

You can read more about ngSrc here: https://docs.angularjs.org/api/ng/directive/ngSrc

$sce is a service that provides Strict Contextual Escaping services to AngularJS. https://docs.angularjs.org/api/ng/service/$sce

edited Apr 25, 2014 at 21:55

answered Apr 25, 2014 at 21:11

Brian Lewis

5,7191 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use AngularJS's scope values to generate custom html tag's attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related