Question

我正在尝试将谷歌地图的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：

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

您可以在此处详细了解ngSrc：https://docs.angularjs.org/api/ng/directive/ngSrc

$sce是一种为AngularJS提供严格上下文转义服务的服务。 https://docs.angularjs.org/api/ng/service/ $ SCE

如何使用AngularJS的范围值来生成自定义html标记的属性

1 个答案: