Angular directive scope between google maps and a controller

问题

The following code finds the current users iPhone geolocation on load and loads a google map accordingly using a directive.

Unfortunately the geolocationData data variable from the directive does not get shared to the html footer {{geolocationData}}...

So how can I pass in this case the geolocationData across from the directive to the html page and/or the controller.

Thank you.

Directive:

'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);
    }
  };
});

And the following controller:

'use strict';

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

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

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

And the following html snippet:

<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>

回答1:

Here it is.

On the directive side you use:

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

And then you pass it in your HTML and retrieve it in your controller :)

Scripts bellow...

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

CONTROLLER:

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

回答2:

You have two options.

One way is to set data binding between your MapCtrl and your directive.

In your directive you have:

scope: { geolocation: '=' }

In your markup

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

The other way is to create a service that holds the data. You can then inject it in both your mapctrl and in you directive.

Hope this helps.

来源：https://stackoverflow.com/questions/26718873/angular-directive-scope-between-google-maps-and-a-controller

标签

angularjs

google-maps

controller

scope

directive