使用方法从 Angular 服务访问数据

Question

我正在尝试从服务中的方法访问数据，该服务 returns 协调我用来发出 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);
};

}));

Answer 1

我认为您的承诺代码略有偏差。尝试将其更改为以下内容。现在你在 promise 解决之前返回。

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 在另一个地方。

使用方法从 Angular 服务访问数据

Accessing data from Angular service with a method

javascript

service

angularjs

angular-leaflet-directive