javascript - Angular IFrame ng-src : Interpolate Error

Question

我正在尝试使用以下方法将 Google map 嵌入到 iframe 中:

<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 但我得到了同样的错误

Answer 1

您必须像这样在您的应用配置中允许 map URL:

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 :

The $sceDelegateProvider provider allows developers to configure the $sceDelegate service. This allows one to get/set the whitelists and blacklists used to ensure that the URLs used for sourcing Angular templates are safe. Refer $sceDelegateProvider.resourceUrlWhitelist and $sceDelegateProvider.resourceUrlBlacklist

查看下面的工作示例

(当然key错了所以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>