Question

我想创建1个服务，我可以发布数据，成功后我可以再次获取数据并更新$ scope.variable ??

怎么做？我试过这种方式：

angular.module('mvc')
.factory('ajaxService', function($http) {
    return {
        getAjaxData: function(response) {
            $http.get(url).success(response);
            return response;
        },

        postAjaxdata: function(postData){
            $http({
                method: "post",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                url: url,
                data: data
            })
            .success(function(response){
                ajaxService.getAjaxData(function(response) {
                    $scope.foo = response;
                });
            });
        }
    }
});

Answer 1

在this中抓取postAjaxdata()以在成功回调中使用，以致电getAjaxData()。

您无权访问服务内部的范围（您也不想从服务访问它）。 Angular约定是向控制器返回一个promise，以便在解析promise时将响应值应用于作用域。您也可以使用回调执行此操作（与发布的代码一致）。在这里，我添加了一个回调postAjaxdata() ...

angular.module('mvc')
.factory('ajaxService', function($http) {
    return {
        getAjaxData: function(successCallback) {
            $http.get(url).success(successCallback);
            return successCallback;
        },

        postAjaxdata: function(postData, successCallback){
            var that = this;
            $http({
                method: "post",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                url: url,
                data: data
            })
            .success(function(){
                that.getAjaxData(successCallback);
            });
        }
    }
});

控制器应该看起来像这样......

function controller ($scope, ajaxService) {

    // ...

    ajaxService.postAjaxdata(postData, function (response) {
        $scope.foo = response;
    });
}

Answer 2

主要问题是您无法以尝试从服务中设置范围变量。

您可以改为使用$q service返回一个promise，当它被解析时，设置为$ scope.foo变量：

.factory('ajaxService', function($http, $q) {

    var ajaxService = {
        getAjaxData: function() {
            return $http.get(url);
        },
        postAjaxdata: function(postData){
            var deferred = $q.defer();
            $http({
                method: "post",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                url: url,
                data: postData
            })
            .success(function(){
              deferred.resolve(ajaxService.getAjaxData());
            });
            return deferred.promise;
        }
    };

    return ajaxService;
});

您还会注意到我将工厂的主体设置为命名变量，然后您可以在返回之前使用该变量在内部调用函数（就像使用ajaxService.getAjaxData()一样）。

然后，在您的控制器中，您可以像这样设置范围变量：

.controller('MyController', function($scope, ajaxService){
  ajaxService.postAjaxdata().then(function(results){
    $scope.foo = results.data;
  })
})

Working Plunker

注意：我的回答与Anthony Chu的回答并不完全不同。我注意到他在我之前发布了他，但我仍然继续前进，因为我采用了一种稍微不同的方法，利用承诺而不是回调。

$ http POST＆amp; $ http GET in 1 service

2 个答案: