Question

我正在尝试使用以下内容在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，但我得到了同样的错误

Answer 1

您必须在应用的配置中允许地址网址，如下所示：

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会抱怨）

＆＃13;

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
    }
  }]
});

＆＃13;

<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>

＆＃13;

Answer 2

*：//www.google.com/maps/**为我做了这件事：

angular.module('app', []).config(function($sceDelegateProvider){

$sceDelegateProvider.resourceUrlWhitelist([
    "*://www.google.com/maps/**"
]);

}）

Answer 3

有时，您可以直接从公共ip或域名中选择图片或iframe来源。在这种情况下，您还可以使用以下代码段禁用所有URL的黑名单。

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

myApp.config(function($sceProvider) {
  $sceProvider.enabled(false);
});

Angular IFrame ng-src：插值错误

3 个答案: