谷歌地圖和控制器之間的角度指令範圍

以下代碼使用指令在負載上查找當前用戶iPhone地理位置並相應地加載谷歌地圖。谷歌地圖和控制器之間的角度指令範圍

不幸的是，從該指令geolocationData數據變量不被共享到HTML頁腳{{geolocationData}} ...

那麼，如何在這種情況下，通過geolocationData對面的指令到HTML頁面和/或控制器。

謝謝。

指令：

'use strict'; 

angular.module('MyApp.directives', ['ngCordova']) 

.directive('map', function($cordovaGeolocation) { 
    return { 
    restrict: 'E', 
    scope: { 
     onCreate: '&' 
    }, 
    link: function ($scope, $element, $attr) { 
     function initialize() { 
     if (!$scope.geolocationData) { 
     $scope.geolocationData = {}; 
     } 

     $cordovaGeolocation 
     .getCurrentPosition() 
     .then(function (position) { 
      var lat = position.coords.latitude 
      $scope.geolocationData.latitude = lat; 
      var long = position.coords.longitude 
      $scope.geolocationData.longitude = long; 

      console.log("POSITION: ", lat, long); //works 

      var mapOptions = { 
      center: new google.maps.LatLng(lat, long), 
      // center: $scope.geolocationCenter, 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map($element[0], mapOptions); 

      $scope.onCreate({map: map}); 

      // Stop the side bar from dragging when mousedown/tapdown on the map 
      google.maps.event.addDomListener($element[0], 'mousedown', function (e) { 
      e.preventDefault(); 
      return false; 
      }); 

     }, function(err) { 
      // error 
     }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    } 
    }; 
});

而下面的控制器：

'use strict'; 

angular.module('MyApp.controllers', ['ngCordova']) 

.controller('MapCtrl', function($scope, $ionicLoading, $cordovaGeolocation) { 

    if (!$scope.geolocationData) { 
    $scope.geolocationData = {}; 
    } 
};

而下面的HTML片段：

<body ng-app="MyApp" ng-controller="MapCtrl"> 

    <!-- MAP AREA --> 
    <ion-content scroll="false" style="bottom:50%;"> 
    <map on-create="mapCreated(map)"></map> 
    </ion-content> 

    <ion-footer-bar class="bar-stable"> 
    {{geolocationData}} 
    </ion-footer-bar> 
</body>

來源

2014-11-03 Jules

你有兩個選擇。

一種方法是設置您的MapCtrl和您的指令之間的數據綁定。

在你的指令，你必須：

scope: { geolocation: '=' }

在您的標記

<map on create=".." geolocation-data="geolocationData"><map>

的另一種方法是創建一個存儲數據的服務。然後你可以在你的mapctrl和你的指令中注入它。

希望這會有所幫助。

來源

2014-11-03 17:07:46 Gilles

謝謝您的時間和精力吉爾斯。總是非常感激。我放棄了您的解決方案，但無法使其工作，因此我採用以下方法作爲解決方法。 – Jules 2014-11-03 19:55:43

我很高興你找到了解決方案。 [與此同時，這是一個接近你的代碼的bin，它說明了我的迴應的第一個選項。]（http://jsbin.com/qosezuwixa/1/edit?html,js,output） – Gilles 2014-11-03 21:13:10

這真的很酷很清楚，謝謝您！ :) – Jules 2014-11-03 21:15:40

這是它。

在指令方面，你使用：

$scope.onCreate({map: map, geolocationData: geolocationData});

然後你通過它在你的HTML，並在控制器:)

腳本婁檢索...

HTML：

... 
<ion-content scroll="false" style="bottom:50%;"> 
    <map on-create="mapCreated(map, geolocationData)"></map> 
</ion-content> 
...

DIRECTIVE：

... 
$cordovaGeolocation 
    .getCurrentPosition() 
    .then(function (position) { 
    var lat = position.coords.latitude 
    var geolocationData = {}; 
    geolocationData.latitude = lat; 
    var long = position.coords.longitude 
    geolocationData.longitude = long; 

    console.log("POSITION: ", lat, long); 

    var mapOptions = { 
     center: new google.maps.LatLng(lat, long), 
     // center: $scope.geolocationCenter, 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map($element[0], mapOptions); 

    $scope.onCreate({map: map, geolocationData: geolocationData}); 
...

控制器：

$scope.mapCreated = function(map, geolocationData) { 
    $scope.map = map; 
    $scope.geolocationData = geolocationData; 
};

來源

2014-11-03 19:54:54 Jules

谷歌地圖和控制器之間的角度指令範圍

回答

相關問題