Geek Answers Handbook

Angular scope between google maps and controller

The following code finds the current geographic location of iPhone users at boot time and loads the Google map accordingly using the directive.

Unfortunately, the geolocationData data variable from the directive does not apply to the html footer {{geolocationData}} ...

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

Thank.

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

<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
source share
2 answers

There he is.

On the directive side you use:

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

And then you pass it into your HTML code and upload it to your controller :)

Scenarios below ...

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

.

- MapCtrl .

:

scope: { geolocation: '=' }


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

- , . mapctrl, .

, .

0

More articles:


All Articles