Question

以下代码在加载时查找当前用户的iPhone地理位置，并使用指令相应地加载Google地图。

不幸的是，指令中的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>

Answer 1

在这里。

在指令方面，您使用：

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

然后在HTML中传递它并在控制器中检索它：）

脚本吼叫......

HTML：

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

指令：

...
$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;
};

Answer 2

您有两种选择。

一种方法是在MapCtrl和您的指令之间设置数据绑定。

在你的指令中你有：

scope: { geolocation: '=' }

在你的标记中

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

另一种方法是创建一个包含数据的服务。然后，您可以在mapctrl和you指令中注入它。

希望这有帮助。

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

2 个答案: