Angular JS服务将坐标发送到控制器

时间:2014-09-20 12:49:13

标签: javascript angularjs maps

我的应用需要获取路径(纬度和经度列表)才能在地图上显示。

我创建了一个执行所有api调用的基本控制器。

function mainController($scope, $http){

  $http.get('/api/lastrun')
    .success(function(data){
      $scope.lastrun = data;
    })
    .error(function(data){
      console.log('Error: ' + data);
    });
}

lastrun有一个路径数组,可以让你访问每个位置。

我使用angular-leaf-directive

创建了一个mapController
function mapController($scope, positionService){
  angular.extend($scope, {
              run: {
                  lat:  0.0,
                  lng:  0.0,
                  zoom: 4
              },
              path: {
                  p1: {
                      color: 'red',
                      weight: 2,
                      latlngs: [
                          { lat: 51.50, lng: -0.082 }, //here is an example of lat and lng in this controller
                          { lat: 48.83, lng: 2.37 },
                          { lat: 0, lng: 7.723812 }
                      ]
                  }
                }
          });
}

我想做的事似乎很容易。我只想在调用/ api / lastrun到latlngs中的mapController时把我得到的位置数组。

我对AngularJS中的服务并不完全熟悉,但我试图构建我的(positionService)。然而它没有用。

有没有人知道如何继续使用我的服务创建一个包含{lat:,lng:}列表的数组并将其调用到我的mapController中?

2 个答案:

答案 0 :(得分:0)

我会做的:

$scope.lastrun = [];
$http.get('/api/lastrun')
    .success(function(data){
       angular.forEach(data, function (value) {
         $scope.lastrun.push({lat : value.lat, lng : value.lng});
       });
     }
    })

然后:

path: {
              p1: {
                  color: 'red',
                  weight: 2,
                  latlngs: $scope.lastrun
              }

希望这有帮助

答案 1 :(得分:0)

我终于找到了解决方案。我在我的服务中使用Adrien的解决方案,而不是在我的控制器中,然后将lastrunpos数组返回到我的mapController。这是我的代码:

var selftracking = angular.module('selftracking',["leaflet-directive"])

  selftracking.service('positionService', function($http){
    var lastrunpos = [];
    $http.get('/api/lastrun')
      .success(function(data){
        angular.forEach(data.path, function (value) {
         lastrunpos.push({lat : value.latitude, lng : value.longitude});
       });
     });
     return {
       getPos : function() {
          return lastrunpos;
       }
     }
  });

function mainController($scope, $http){
  //Get all the last activities in the front page
  $http.get('/api/lastactivity')
    .success(function(data){
      $scope.lastactivity = data;
    })
    .error(function(data){
      console.log('Error: '+ data);
    });
  $http.get('/api/lastrun')
    .success(function(data){
      $scope.lastrun = data;
    })
    .error(function(data){
      console.log('Error: ' + data);
    });
}

function mapController($scope, positionService){
  angular.extend($scope, {
              run: {
                  lat: 51.505,
                  lng: -0.09,
                  zoom: 4
              },
              path: {
                  p1: {
                      color: 'red',
                      weight: 8,
                      latlngs: positionService.getPos()
                  }
                }
          });
}