服务在 angularjs 的数组中返回未定义

Question

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

Answer 1

似乎您需要 return 来自异步调用的数据，并且您正在 return 从函数外部获取值。我建议你在这种情况下使用 promise 模式。

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 当你在做异步调用时 return 什么都没有。

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

服务在 angularjs 的数组中返回未定义

service is returning undefined in the array in angularjs

javascript

angularjs

angularjs-service

angular-promise

angularjs-factory