service在angularjs中的数组中返回undefined

时间:2015-09-25 18:04:31

标签: javascript angularjs angularjs-service angular-promise angularjs-factory

我的angularjs脚本遇到了麻烦。

背景:我正在尝试确定用户的位置,我已经在我的服务中写了我的业务逻辑,从那里我返回用户的位置。

问题:我在控制台中获得的结果如下:

  

[undefined] landingPage.js:11 undefined landingPage.js:11 undefined

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

1 个答案:

答案 0 :(得分:2)

似乎您需要从异步调用返回数据,并且您从函数外部返回值。我建议你在这种情况下使用承诺模式。

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