使用带有 $http 承诺的工厂返回空对象答案

【问题标题】：Using a factory with $http promise returns empty object使用带有 $http 承诺的工厂返回空对象
【发布时间】：2015-03-17 19:59:10
【问题描述】：

我有一个简单的工厂，它获取数据文件并将其保存到 service.data：

angular.module("tiki").factory("editTiki", ["$http", function($http){

    var service = {}
    service.data = {}

    service.getTikis = function(){

        $http.get("data/tikis.json").success(function(tikis){

            console.log(tikis)
            service.data = tikis

        })

    }

    return service



}])

然后，在控制器中，我将其分配给 $scope。这当然首先是空的，但是当 $http 解析时，它应该更新我的工厂，然后用返回的数据更新 service.data 对象。

angular.module('tiki').controller("tiki.controller.settings.edit", ["$scope", "editTiki", function($scope, editTiki){


    //should return the tikis
    $scope.preview = editTiki.data

    editTiki.getTikis()


    $scope.showEditTikiObject = function(){

        console.log($scope.preview)

    }

}])

但是，我有这个函数来测试数据的内容，它返回一个空对象。这是为什么呢？

【问题讨论】：

看看这个。 chariotsolutions.com/blog/post/…

标签： angularjs http asynchronous factory

【解决方案1】：

在将service.data = tikis 分配给$scope.preview 之后，您正在重新分配它。

你应该对承诺做点什么。

angular.module("tiki").factory("editTiki", ["$http", function($http){
    var service = {};
    service.data = {};

    service.getTikis = function(){
        return $http.get("data/tikis.json").success(function(tikis){
            console.log(tikis)
            service.data = tikis;

            return service.data;
        })
    };

    return service;
}]);

angular.module('tiki').controller("tiki.controller.settings.edit", ["$scope", "editTiki", function($scope, editTiki){
    editTiki.getTikis()
    .then(function () {
        $scope.preview = editTiki.data;
    });

    $scope.showEditTikiObject = function(){
        console.log($scope.preview);
    };
}])

【讨论】：

是的，我不想管理控制器内部的数据，我想在它应该在的服务中管理它。我正在关注这篇文章，但它对我不起作用：toddmotto.com/rethinking-angular-js-controllers
您需要在服务中缓存 tikis 吗？如果没有，则 id 完全摆脱 service.data 对象，只返回承诺中的响应，然后可以通过then(function (response) { $scope.preview = response.data; }); 处理
是的，我需要在服务中缓存 tikis。我想分解控制器中的数据模型，它应该留在服务中。

【解决方案2】：

我最终得到了以下结果。所以这里我不是将scope对象注入工厂，而是使用$http返回的promise的概念在控制器本身中设置$scope强>服务。希望这会有所帮助。

(function () {
    getDataFactory = function ($http)
    {
        return {
            callWebApi: function (reqData)
            {
                var dataTemp = {
                    Page: 1, Take: 10,
                    PropName: 'Id', SortOrder: 'Asc'
                };

                return $http({
                    method: 'GET',
                    url: '/api/PatientCategoryApi/PatCat',
                    params: dataTemp, // Parameters to pass to external service
                    headers: { 'Content-Type': 'application/Json' }
                })                
            }
        }
    }
    patientCategoryController = function ($scope, getDataFactory) {
        alert('Hare');
        var promise = getDataFactory.callWebApi('someDataToPass');
        promise.then(
            function successCallback(response) {
                alert(JSON.stringify(response.data));
                // Set this response data to scope to use it in UI
                $scope.gridOptions.data = response.data.Collection;
            }, function errorCallback(response) {
                alert('Some problem while fetching data!!');
            });
    }
    patientCategoryController.$inject = ['$scope', 'getDataFactory'];
    getDataFactory.$inject = ['$http'];
    angular.module('demoApp', []);
    angular.module('demoApp').controller('patientCategoryController', patientCategoryController);
    angular.module('demoApp').factory('getDataFactory', getDataFactory);    
}());

【讨论】：