对象属性不是在工厂成员函数内部创建的

Question

我在 Angular.js 工厂中有一个对象：

angular.module('myapp')
        .factory('geoLocationService', function () {


            var geoLocationObj = {};

            var geocoder = new google.maps.Geocoder();

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(_successFunction, _errorFunction);
            }
            function _successFunction(position) {
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                var latlng = new google.maps.LatLng(lat, lng);
                geocoder.geocode({'latLng': latlng}, function (results, status) {

                    if (status === google.maps.GeocoderStatus.OK) {
                        if (results[2]) {
                            geoLocationObj.resultCity = results[2].formatted_address;
                            alert(geoLocationObj.resultCity);
                        } else {
                            alert("No results found");
                        }
                    } else {
                        alert("Geocoder failed due to: " + status);
                    }
                });
            }


            return geoLocationObj;


        });

这有效 alert(geoLocationObj.resultCity); 并以属性值提醒

但是

console.log(geoLocationObj);

不记录属性geoLocationObj.resultCity

我正在尝试在我的控制器的工厂外使用 geoLocationObj.resultCity，但它不在那里。

我的控制器中有：

.controller('IndexCtrl', function ($scope, geoLocationService) {

    var geoLocationService = geoLocationService;

    console.log(geoLocationService);

geoLocationService 是一个空对象

我不明白为什么会这样。你能帮我解决这个问题吗？

Answer 1

您的代码中的问题是您的对象在回调 (_successFunction) 中初始化，这意味着 returned 对象仍然是空的，因为尚未调用 _successFunction。

您应该 return 使用 $q 的承诺并在您的控制器中调用 .then()。

angular.module('myapp')
    .factory('geoLocationService', ['$q', function ($q) {


        var geoLocationObj = {};
        var deferred = $q.defer();

        var geocoder = new google.maps.Geocoder();

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(_successFunction, _errorFunction);
        }
        function _successFunction(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            var latlng = new google.maps.LatLng(lat, lng);
            geocoder.geocode({'latLng': latlng}, function (results, status) {

                if (status === google.maps.GeocoderStatus.OK) {
                    if (results[2]) {
                        deferred.resolve(results[2].formatted_address);
                        alert(geoLocationObj.resultCity);
                    } else {
                        alert("No results found");
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }


        return deferred.promise;
    })];

在你的控制器中

.controller('IndexCtrl', function ($scope, geoLocationService) {
   geoLocationService.then(function(geoLocObj){
        console.log(geoLocObj); Here your object has been resolved
   });

Answer 2

你的工厂应该return像这样

angular.module('myapp')
.factory('geoLocationService', function() {
return{
    geoLocationObj:function(){
        var geocoder = new google.maps.Geocoder();
       if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(_successFunction, _errorFunction);
        }
        function _successFunction(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            var latlng = new google.maps.LatLng(lat, lng);
            geocoder.geocode({'latLng': latlng}, function (results, status) {

                if (status === google.maps.GeocoderStatus.OK) {
                    if (results[2]) {
                        geoLocationObj.resultCity = results[2].formatted_address;
                        alert(geoLocationObj.resultCity);
                    } else {
                        alert("No results found");
                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }
  return geoLocationObj 
}
}
});

你可以像这样调用你的控制器

angular.module('myapp', [])
.controller('IndexCtrl', function ($scope, geoLocationService) {
     var promise = geoLocationService.geoLocationObj()
         promise.then(function(success){
                  console.log("me "+success);
                 },function(error){
                  console.log("They eat all my candies :" +error)
                 })

});

你可以在Js bin

这里播放

PS。您需要包含 google 地图库

对象属性不是在工厂成员函数内部创建的

Object property is not created inside a factory member function

javascript

object

angularjs

对象 属性 不是在工厂成员函数内部创建的

Object property is not created inside a factory member function

javascript

object

angularjs

对象属性不是在工厂成员函数内部创建的