使用带有 $http promise returns 空对象的工厂

Question

我有一个简单的工厂，可以获取数据文件并将其保存到 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)

    }

}])

但是，我有这个功能来测试数据的内容，它 returns 是一个空对象。这是为什么？

Answer 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);
    };
}])

Answer 2

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

(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);    
}());

使用带有 $http promise returns 空对象的工厂

Using a factory with $http promise returns empty object

asynchronous

factory

http

angularjs