web-dev-qa-db-ja.com

AngularJSファクトリーHTTPは空を返します

私は初めてAngularJSを試しています。ファクトリを使用してhttp-getリクエストからJSONデータを取得していますが、ajaxリクエストが完了する前にオブジェクトが空で返されます。

工場：

myDemo.factory('photosFactory', function($http) {
    var photos = [];

    var factory = {};

    factory.getPhotos = function() {
        $http({
            url: 'content/test_data.json',
            method: 'GET'
        }).success(function(data, status, headers, config) {
            photos = data;
            return photos;
        });
    };
    return factory;
});

コントローラ：

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
    $scope.photos = [];
    init();
    function init() {
        $scope.photos = photosFactory.getPhotos();
    }
};

これが私が思いついたものです。コントローラーが$ scope.photosを設定すると、値は、ajax応答が入力される前にphotos配列を返すかのように空になります。

httpangularjsfactoryangularjs-service
23
user1121487

Promiseを返すようにコードを変更し、コントローラーで値を使用する必要があります。ダミーの変更されたコードを参照してください。

myDemo.factory('photosFactory', function($http) {
 return{
    getPhotos : function() {
        return $http({
            url: 'content/test_data.json',
            method: 'GET'
        })
    }
 }
});

およびコントローラー-

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
    $scope.photos = [];
    photosFactory.getPhotos().success(function(data){
       $scope.photos=data;
   });
};
55
Ajay Beniwal

Q promiseライブラリを使用すると、成功関数がサービス内にとどまることができます。

app.factory('Data', function ($http, $q) {
    return {
        ajaxItems: function () {
            var deferred = $q.defer();
            $http({ method: "POST", url: "/Home/GetSearchResults" })
                .success(function (data, status, headers, config) {
                    deferred.resolve(data);
                }).error(function (data, status, headers, config) {
                    deferred.reject(status);
                });
            return deferred.promise;
        }
    }
});

app.controller('ResultsCtrl', ['$scope', 'Data', function ($scope, Data) {
    $scope.get = function () {
        $scope.items = Data.ajaxItems();
        //the model returns a promise and THEN items
        $scope.items.then(function (items) {
            $scope.items = items;
        }, function (status) {
            console.log(status);
        });
    };
}]);
26
getsetbro

$resource は、あなたが望むものを達成できるようにするだけでなく、$http

（アプリへの依存関係としてngResrouceを含めることを忘れないでください。）

myDemo.factory('photosFactory', function($resource) {
    var factory = {};

    factory.getPhotos = $resource('content/test_data.json', {}, {
        'query': {method: 'GET', isArray: true}
    });
    return factory;
});

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
    $scope.photos = [];
    init();
    function init() {
        $scope.photos = photosFactory.getPhotos.query();
    }
};
7
Mark Coleman