谷歌地图和控制器之间的角度指令范围

以下代码使用指令在负载上查找当前用户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

谷歌地图和控制器之间的角度指令范围

回答

相关问题