【问题标题】:Accessing data from Angular service with a method使用方法从 Angular 服务访问数据
【发布时间】:2016-05-25 19:50:24
【问题描述】:

我正在尝试从服务中的方法访问数据,该方法返回用于发出 HTTP 请求的坐标。我在控制器中添加了我的 Leaflet 代码,这样我就可以访问该 lat,lng 坐标来向另一个 API 发出 API 请求。一切正常。问题是当我尝试将此数据传递给控制器​​时,它不会读取属性“L.Control.Search”。我还尝试编写一个数组并在控制器中访问它,它返回未定义。

   app.service('mapService', (function($http,$q) {
    //Coordinates
    var fmCoordinates = {};
    //Function to Request markets
    var requestMarkets = function(lat,lng){
        var defer = $q.defer();
        var dataFromHttp = {};
        var options = {
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: "http://someurl?lat=" + lat + "&lng=" + lng
        };
        $http(options).then(function(result) {
        dataFromHttp = result.data;
        defer.resolve(dataFromHttp);
    }, function(error){
        defer.reject(error);
    });
    return defer.promise;
    };


L.Control.Search = L.Control.extend({

_getLocation: function(key) {   //extract latlng from _recordsCache

        var latLong = this._recordsCache[key];
        console.log("This is latlong:\n"+Object.keys(latLong));
        fmCoordinates.lat = latLong.lat;
        fmCoordinates.lng = latLong.lng;
        console.log(fmCoordinates.lat,fmCoordinates.lng || "Nothing yet!");
        var promise = requestMarkets(fmCoordinates.lat,fmCoordinates.lng);
        promise.then(function(greeting) {
            for(var property in greeting.results) {
                console.log(property + "=" + greeting.results[property]);
                };
            console.log('Success: ' + greeting.results);
            }, function(reason) {
            console.log('Failed: ' + reason);
            });
        if( this._recordsCache.hasOwnProperty(key) )
            return latLong;//then after use .loc attribute
        else
            return false;
    },

L.Map.addInitHook(function () {
    if (this.options.searchControl) {
        this.searchControl = L.control.search(this.options.searchControl);
        this.addControl(this.searchControl);
    }
});

L.control.search = function (options) {
    return new L.Control.Search(options);
};

}));

【问题讨论】:

  • 你在哪里退货?您只能访问在服务中返回的数据。
  • 好的,我明白了。现在在我的控制器中,我想调用 mapService.requestMarkets,但 requestMarkets 在 _getLocation() 中被调用。我仍然无法访问该功能,因为它位于我的控制器无法识别的 L.Control.Search 内部
  • 您可以返回 L.Control.Search 例如。 return { search: L.Control.Search, requestMarkets: requestMarkets} 然后在您的控制器中只需 mapService.search()

标签: javascript angularjs service angular-leaflet-directive


【解决方案1】:

我认为你的承诺代码有点不对劲。尝试将其更改为以下内容。现在你在承诺解决之前就回来了。

var requestMarkets = function(lat,lng){
    var defer = $q.defer();
    var dataFromHttp = {};
    var options = {
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: "http://someurl?lat=" + lat + "&lng=" + lng
    };
    return $http(options).then(function(result) {
        dataFromHttp = result.data;
        defer.resolve(dataFromHttp);
        return defer.promise;
    }, function(error){
        defer.reject(error);
        return defer.promise;
   });

};

同样在一个地方你有 l.Control.Search 和 L.control.search 在另一个地方。

【讨论】:

  • 您在 _getLocation 中使用的承诺也有类似的问题。在 then() 函数之后放置的任何代码都将立即运行,而不是在 then 函数完成之后。 (这实际上是您的问题的原因,但我认为您明白了。)
  • 为什么是return defer.promise?对我来说,在成功或错误回调函数结束时返回一些值是没有意义的。
  • 嗯,您在原始代码中已返回 defer.promise。我只是把它移到了合适的地方。无论如何,您正在通过函数中的承诺进行调用,并从函数中返回值,并期望承诺已经完成,这是您无法做到的。另外,我更新了答案以反映一些案例问题。
猜你喜欢
  • 2020-12-26
  • 2015-03-24
  • 1970-01-01
  • 2016-06-04
  • 2015-08-17
  • 2019-05-26
  • 1970-01-01
  • 2014-06-14
  • 1970-01-01
相关资源
最近更新 更多