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