Question

我正在尝试将$ scope中的值发送到前端。这是来自Google embade的网址。但似乎它抛出了一些错误。

这里我附上了错误截图。

enter image description here

以下是我的控制器的样子

var module = angular.module('app', ['onsen']);
    module.controller('ListingMapCtrl', function($scope, $http, $rootScope) {
    ons.ready(function() {  
                    $scope.mapLocation="https://www.google.com/maps/embed/v1/directions?key=MY_KEY&origin=Current+Location&destination="+$rootScope.LatLong;

        });
});

这就是我所说的：

<iframe ng-src="{{mapLocation}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>

其他人有同样的问题吗？有什么方法可以解决问题吗？

以下是我的HTML Head标记的样子

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <title>Come To Woodstock</title>  

  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">  
  <link rel="stylesheet" href="styles/app.css"/>
  <link rel="stylesheet" type="text/css" href="styles/custom.css">
  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    
  <script src="lib/onsen/js/angular/angular-sanatize.min.js"></script>  //Script we want to include

  <script type="text/javascript" src="js/custom.js"></script>
</head>

Answer 1

您需要首先将网址标记为安全，首先将ngSanitize注入您的应用并将其包含在您的html（<script src="angular-sanatize.min.js">）中，然后将$sce添加到您的控制器中。从那里你可以在你的网址上使用trustAsResourceUrl并在你的ng-src中使用它。

JS

var module = angular.module('app', ['onsen', 'ngSanitize']);    
module.controller('ListingMapCtrl', function($scope, $http, $rootScope, $sce) {
    ons.ready(function() {
        $scope.mapLocation = "https://www.google.com/maps/embed/v1/directions?key=MY_KEY&origin=Current+Location&destination="+$rootScope.LatLong;
        $scope.mapLocationURL = $sce.trustAsResourceUrl($scope.mapLocation);
    });
});

HTML

<iframe ng-src="{{mapLocationURL}}" frameborder="0" style="border:0" width="100%" height="100%;"></iframe>

无法通过Angularjs加载谷歌地图网址

1 个答案: