J'essaie d'intégrer une carte Google dans un iframe en utilisant:

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

Cependant j'obtiens:

Error: $interpolate:interr Interpolation Error

Mon ensemble de données est sous la forme

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

Qu'est-ce que je fais mal? J'ai essayé ng-src mais j'obtiens la même erreur

1
Edd 7 mars 2016 à 19:19

3 réponses

Meilleure réponse

Vous devez autoriser l'URL des cartes dans la configuration de votre application comme ceci:

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

Dans les docs:

Le fournisseur $ sceDelegateProvider permet aux développeurs de configurer le service $ sceDelegate. Cela permet d'obtenir / définir les listes blanches et les listes noires utilisées pour garantir la sécurité des URL utilisées pour l'approvisionnement des modèles angulaires. Reportez-vous à $ sceDelegateProvider.resourceUrlWhitelist et $ sceDelegateProvider.resourceUrlBlacklist

Voir un exemple de travail ci-dessous

(Bien sûr, la clé est erronée, donc Map se plaindra)

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>
4
Shashank Agrawal 7 mars 2016 à 16:35

Parfois, vous pouvez choisir directement les images ou les sources iframe à partir d'ips publics ou de noms de domaine. Dans ce cas, vous pouvez également désactiver la liste noire de toutes les URL avec l'extrait de code suivant.

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

myApp.config(function($sceProvider) {
  $sceProvider.enabled(false);
});
0
Santosh 14 sept. 2018 à 06:34

*: //www.google.com/maps/** l'a fait pour moi:

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

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

})

0
Devin McQueeney 18 oct. 2016 à 06:25