Question

平

我正在使用angular并尝试在其中实现iframe。我已经尝试了很多方法来插入来自数据库的longitude和latitude但是每当尝试写这样的东西时我都会收到错误。

我尝试了什么

<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q={{product.mall.lat}},{{product.mall.long}}&amp;key= key"  allowfullscreen></iframe>

当我尝试上述方式时出现此错误

[$interpolate:noconcat]

正常iframe

<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=40.7127837,-74.0059413&amp;key= Akey"  allowfullscreen></iframe>

Answer 1

使用ng-src而不是src。

出于安全原因，您无法在源属性中连接URL：您必须在范围变量中连接Javascript中的URL，例如fullURL然后ng-src =“{{fullURL}}”。

如果启用了严格上下文转义（SCE） - 并且Angular v1.2默认启用了SCE，则需要将URL列入白名单。

参考1 Angular js scope var value in iframe

Answer 2

现在它的工作，您需要将url包装到一个方法中，使其成为可信的URL源

in html

     <iframe width="100%" height="250" frameborder="0" style="border:0" ng-src='{{getTrustedUrl("https://www.google.com/maps/embed/v1/place?q="+product.mall.lat+","+product.mall.long+"&key=AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0")}}' allowfullscreen>

    </iframe>

将此功能添加到您的控制器

  $scope.getTrustedUrl = function(src) {
  return $sce.trustAsResourceUrl(src);
  }

Answer 3

已经在另一个问题中回答了

AngularJS multiple expressions concatenating in interpolation with a URL

更多细节 Strict Contextual Escaping

Answer 4

这是我的导师所做的

在我的控制器功能中我得到了long＆amp; lat他做了类似的事

$scope.single_product = function (product_id) {
        $http.get('url' + product_id + '?expand=product_variants,product_variant_options,photos,shop,mall',
                {headers:
                            {'Content-Type': 'application/x-www-form-urlencoded',
                                'Authorization': $rootScope.keyword_auth_token}
                })
                .success(function (data) {
                    $scope.product = data;
                    $scope.photo = $scope.product.photos;   //Storing photos in phot object
                    for (var i = 0; i < $scope.photo.length; i++) {
                        slides.push({path: $scope.photo[i].path, id: currIndex++}); //I already mentioned slides as an array
                    }
                    console.log(slides);
                    console.log($scope.product);
                    var compile_map = '<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q='+$scope.product.mall.lat+','+$scope.product.mall.long+'&amp;key= AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0"  allowfullscreen></iframe>';
                    angular.element($document[0].querySelector('#map_image')).append(compile_map); //This function will run only and load the html if it has long and lat
                })
                .error(function (data) {
                    console.log(data);
                });
    };

然后在html只是那个

<div id="map_image"></div>

它就像一个魅力

如何插入经度和角度js中iframe的纬度？

4 个答案: