Angular directive scope between google maps and a controller

Question

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>

Jules · Accepted Answer · 2014-11-03 19:54:54Z

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

Gilles · Accepted Answer · 2014-11-05 10:12:59Z

0

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.

edited Nov 5, 2014 at 10:12

answered Nov 3, 2014 at 17:07

Gilles

1678 bronze badges

6 Comments

Jules Over a year ago

Thank you for your time and efforts Gilles. It is always much appreciated. I gave a go to your solution and was not able to make it work so I used the following as a workaround.

Gilles Over a year ago

I'm glad you found a solution. In the meantime, here's a bin close to your code that illustrate the first option of my response.

Jules Over a year ago

Strangely enough my solution is still not accurate. I have added a moveable marker and when I do something like marker.getPosition().lat(); from within the Controller, and update the $scope.geolocationData within the scope my Html page does not update the values... even though I can console.log both new lat and log, and the scope.geolocationData... Do you have any idea why?

Gilles Over a year ago

Could put that in a jsbin? It'll be easier to debug.

Jules Over a year ago

Thank you for your response, here is a link to it, please note that I pasted all three file into the JS section... :( jsbin.com/luhasa/2/edit?html,js

|

Collectives™ on Stack Overflow

Angular directive scope between google maps and a controller

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related