服務正在angularjs中返回未定義的數組

Question

我正面臨着我的angularjs腳本的麻煩。

背景：我試圖確定用戶的位置，我在我的服務中寫入了我的業務邏輯，從那裏返回用戶的位置。

問題：我在我的控制檯得到的結果如下：

[未定義] landingPage.js：11個未定義landingPage.js：11未定義

var app = angular.module("PublicEvents", ["geolocation"]); 

app.controller("iterator", ["$scope", "$http", "locationService1", function($scope, $http, locationService1){ 
    $scope.targetCity = []; 
    $scope.targetCity.push(locationService1.location()); 

    console.log($scope.targetCity); 
    $scope.$watch(function() { return locationService1.cityNameArray; }, 
      function (value) { 
     $scope.targetCity = value; 
     console.log($scope.targerCity); 
    } 
    ); 

}]); 



app.service("locationService1",['$http','$window', function($http, $window){ 
    var access = this; 
    this.location = function(){ 
     $window.navigator.geolocation.getCurrentPosition(function(position) { 
      access.lat = position.coords.latitude; 
      access.long = position.coords.longitude; 

      access.locationData = []; 
      access.cityNameArray = []; 

      /*var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=18.9750,72.8258&sensor=true";*/ 
      var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+access.lat+","+access.long+"&sensor=true"; 

      //AJAX CALL TO GET THE LOCATION 
      $http.get(url).then(function(response) { 
       access.locationData = response.data; 
       if(access.locationData.status == "OK" || access.locationData.status==200) { 
        angular.forEach(access.locationData.results, function(value, key){ 
         var len = value.address_components.length; 
         for(var i = 0; i< len; i++){ 
          if(value.address_components[i].types[0] =="locality" || value.address_components[i].types[0] =="sublocality_level_1"){ 
           access.cityNameArray.push(value.address_components[i].long_name); 
          } 
         } 
        }); 
       }; 
      }); 
      return access.cityNameArray; 
     }); 
    }; 
}]); 

Answer 1

好像您需要從異步調用中返回數據，並且您從函數外部返回值。我建議你在這種情況下使用承諾模式。

this.location = function(){ 
    $window.navigator.geolocation.getCurrentPosition(function(position) { 
     access.lat = position.coords.latitude; 
     access.long = position.coords.longitude; 

     access.locationData = []; 
     access.cityNameArray = []; 

     /*var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=18.9750,72.8258&sensor=true";*/ 
     var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+access.lat+","+access.long+"&sensor=true"; 

     //return promise from here.. 
     return $http.get(url).then(function(response) { 
      access.locationData = response.data; 
      if(access.locationData.status == "OK" || access.locationData.status==200) { 
       angular.forEach(access.locationData.results, function(value, key){ 
        var len = value.address_components.length; 
        for(var i = 0; i< len; i++){ 
         if(value.address_components[i].types[0] =="locality" || value.address_components[i].types[0] =="sublocality_level_1"){ 
          access.cityNameArray.push(value.address_components[i].long_name); 
         } 
        } 
       }); 
      }; 
      return access.cityNameArray; //returned from success callback 
     }); 

    }); 
}; 

內部控制器，你需要使用.then功能，從服務loacation函數獲取數據。當你在做異步調用時，你正在做console.log，它不返回任何東西。

locationService1.location().then(function(data){ //success callback. 
    $scope.targetCity.push(data) 
},function(error){ //error callback. 
    console.log(error) 
});