javascript - Angular IFrame ng-src:插值错误

我正在尝试使用以下方法在iframe中嵌入Google地图：

<div ng-repeat="event in ctrl.events">
    <iframe src="{{'https://www.google.com/maps/embed/v1/place?q=(' + event.location.latitude + '%2C' + event.location.longitude + ')&zoom=12&key=API_KEY'}}">
    </iframe>
</div>

但是我得到：

Error: $interpolate:interr Interpolation Error

我的数据集的格式如下

$scope.events =
[
    {
        location : {
            longitude: 1.1,
            latitude: -1.1
        }
    }
]

我究竟做错了什么？我尝试了ng-src，但收到相同的错误

最佳答案

您必须像这样在应用的配置中允许地图网址：

myApp.config(["$sceDelegateProvider", function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        "self",
        // Allow loading from Google maps
        "https://www.google.com/maps/embed/v1/place**"
    ]);
}]);

从docs：


  $ sceDelegateProvider提供程序允许开发人员配置
  $ sceDelegate服务。这样一来，即可获取/设置白名单，
  用于确保用于采购Angular的URL的黑名单
  模板是安全的。请参考$ sceDelegateProvider.resourceUrlWhitelist
  和$ sceDelegateProvider.resourceUrlBlacklist


请参阅下面的工作示例

（当然，密钥是错误的，因此Map会抱怨）

var myApp = angular.module("sa", []);

myApp.config(["$sceDelegateProvider",
  function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(["self",
      "https://www.google.com/maps/embed/v1/place**"
    ]);
  }
]);

myApp.controller("foo", function($scope) {
  $scope.events = [{
    location: {
      longitude: 1.1,
      latitude: -1.1
    }
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="foo">
  <div ng-repeat="event in events">
    <iframe src="{{'https://www.google.com/maps/embed/v1/place?q=(' + event.location.latitude + '%2C' + event.location.longitude + ')&zoom=12&key=API_KEY'}}">
    </iframe>
  </div>
</div>