accessing rootscope and adding value from parameters

Question

I am trying to get the longitude and latitude from the current position and set it to the marker on the google map and it is not working. Right now i am not able to access the variable created, I tried doing the navigator in my directive instead but still nothing working.

myApp.controller('PhoneListCtrl', ['$rootScope', '$http', '$scope', function ($scope, $http, $rootScope) {

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
                $scope.$apply(function(){
                $scope.position = position;
          $rootScope.position = position;
        });
        console.log(position);
        $rootScope.latitude = position.coords.latitude;
        $rootScope.longititude = position.coords.longititude;
        console.log(position.coords.latitude);
        console.log(position.coords.longititude);
        });

    }

}]);
myApp.directive("myMaps", ['$rootScope', function($scope, $rootScope){
  console.log( $rootScope.position.coords.latitude + " rootscope ");
  return{
    restrict:'E',
    template:'<div></div>',
    replace: true,
    controller: function($scope, $element,$rootScope) {
    },
    link: function(scope, element, attrs){
      console.log('{{position.coords.latitude}}');
      var myLatLng = new google.maps.LatLng(56, -75.732333);
      var myLatLng2 = new google.maps.LatLng(56.2843691, -70.732333);
      var mapOptions = {
        center: myLatLng,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
      var marker = new google.maps.Marker({
        position: myLatLng, 
        map: map, 
        title: "hello world!"
      });
      var marker2 = new google.maps.Marker({
        position: myLatLng2, 
        map: map, 
        title: "hello"
      });
      marker.setMap(map);
      marker2.setMap(map);
    }
  };
} ]);

Answer 1

Try reordering the dependencies injected in this line, to match the parameters order:

myApp.controller('PhoneListCtrl', ['$rootScope', '$http', '$scope', function ($scope, $http, $rootScope) {

Fixed line:

myApp.controller('PhoneListCtrl', ['$scope', '$http', '$rootScope', function ($scope, $http, $rootScope) {

Also in the following line, $scope wasn´t injected:

myApp.directive("myMaps", ['$rootScope', function($scope, $rootScope){

Fixed line:

myApp.directive("myMaps", ['$scope', '$rootScope', function($scope, $rootScope){

Remember that In this scenario the ordering of the values in the array must match the ordering of the parameters in the controller/directive.

BTW, $rootScope is not recomended for constantly changing values. Try using the directives scope. https://docs.angularjs.org/guide/directive

Answer 2

I would not suggest using rootScope in this situation. You need to wait until angular has evaluated the variable, so trying to console log the var in the directive definition will not work.

You can pass the controller scope variables to directives. See the concept of Isolated Scope: pass some values from the parent scope to the directives

There are 3 types of prefixes AngularJS provides:

1. "@" ( Text binding / one-way binding )
2. "=" ( Direct model binding / two-way binding )
3. "&" ( Behaviour binding / Method binding )

To do it, include the scope variable you want to pass to your directive in html.

<my-maps position="{{position}}"></my-maps>

Just use $scope as usual in the controller. (I fixed the order of your dependency injection below)

myApp.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) {
  if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(function(position){
        $scope.position = position;
      });
  }
}]);

Add the scope definitions in your directive

scope: {
    position: "="
}

Full directive:

myApp.directive("myMaps", ['$scope', function($scope){
  return{
    restrict:'E',
    template:'<div></div>',
    replace: true,
    scope: {
      position: "="
    }
    link: function(scope, element, attrs){
      console.log(scope.position);
      var myLatLng = new google.maps.LatLng(56, -75.732333);
      var myLatLng2 = new google.maps.LatLng(56.2843691, -70.732333);
      var mapOptions = {
        center: myLatLng,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
      var marker = new google.maps.Marker({
        position: myLatLng, 
        map: map, 
        title: "hello world!"
      });
      var marker2 = new google.maps.Marker({
        position: myLatLng2, 
        map: map, 
        title: "hello"
      });
      marker.setMap(map);
      marker2.setMap(map);
    }
  };
} ]);