AngularJS의 범위 값을 사용하여 맞춤 html 태그의 속성을 생성하는 방법

Question

Google지도의 iframe을 레스토랑 당 하나씩 프로젝트에 포함하려고합니다. 문제는 그 요지의 값이있는 경우 :

$scope.restaurant.address 

그리고 나는이 코드를 삽입해야 :

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

{{restaurant.address}}에 올바르게 해석되지 않으며,을 링크가 생성되면 {{restaurant.address}}가 나타납니다.

단서가 있습니까? 어떤 도움을 주셔서 감사합니다, 미리 감사드립니다!

Answer 1

같은 것을보십시오 :

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 : https://docs.angularjs.org/api/ng/directive/ngSrc

$sce는 AngularJS와 엄격한 상황 이스케이프 서비스를 제공하는 서비스입니다 :

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

현재 ngSrc에 대한 자세한 내용을보실 수 있습니다 . https://docs.angularjs.org/api/ng/service/ $ sce