访问rootscope并从参数中增加价值

Question

我正在尝试从当前位置获取经度和纬度，并将其设置为Google地图上的标记，但它不起作用。 现在，我无法访问创建的变量，我尝试在指令中执行导航器，但仍然无济于事。

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

尝试重新排序此行中注入的依赖项，以匹配参数order：

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

固定的线：

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

同样在以下行中，未注入$ scope：

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

固定的线：

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

请记住，在这种情况下，数组中值的顺序必须与控制器/指令中参数的顺序匹配。

顺便说一句，$ rootScope不推荐用于不断变化的值。 尝试使用指令范围。 https://docs.angularjs.org/guide/directive

Answer 2

我不建议在这种情况下使用rootScope 。 您需要等待，直到angular对变量进行了评估，因此尝试在指令定义中控制台记录var无效。

您可以将控制器作用域变量传递给指令。 请参阅隔离范围的概念：将某些值从父范围传递给指令

AngularJS提供了3种前缀：

1. “ @”（文本绑定/单向绑定）
2. “ =”（直接模型绑定/双向绑定）
3. “＆”（行为绑定/方法绑定）

为此，请在HTML中包含要传递给指令的作用域变量。

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

只需像往常一样在控制器中使用$scope 。 （我在下面固定了依赖项注入的顺序）

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

在指令中添加范围定义

scope: {
    position: "="
}

完整指令：

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