AngularJS $ http数据未正确返回

Question

我正在尝试使用工厂封装数据（通过JSON文件）在我的控制器中使用，但是当我调用工厂时，它会在返回数据之前执行我的$scope，从而导致空数组。

我希望能够先获取数据，然后执行返回我的数据的$scope声明，例如：

工厂：

angular.module('myApp')
.factory('StoreProducts', function ($http) {

    var storeData = [];

    var promise = $http.get('/example.json')
    .success(function (data) {
        storeData = data;
    });

    return {
        promise: promise,
        setData: function(data) {
            storeData = data;
        },
        getData: function() {
            return storeData;
        }
    };
});

的控制器：

angular.module('myApp')
.controller('StoreCtrl', function ($scope, $log, StoreProducts) {

    $scope.data = StoreProducts.getData();

    $log.log($scope.data);
});

JSON文件：

[
    {
        "productId": "1",
        "name": "Example 1",
        "price": "5.99"
    },
    {
        "productId": "2",
        "name": "Example 2",
        "price": "2.99"
    },
]

我在想这是因为getData()功能的范围完全没有了，但我似乎不这么认为。我在做什么完全错误？

Answer 1

通常的做法是你的数据函数返回一个promise对象。从概念的角度来看，如果你处理数据检索之类的异步操作，getData不能（也不应该）简单地返回值，而是返回一个承诺。

基本理念是：

angular.module('myApp')
.factory('StoreProducts', function ($http) {
    // ... 
    return {
        // ...
        getData: function() {
            return $http.get('/example.json').then(function(response) {
                return response.data;
            });
        }
    };
});

你稍后在控制器中使用的

：

StoreProducts.getData().then(function(data) {
    $scope.data = data;
});

当然，如果您不想在每次getData电话上查询服务器，则可以添加缓存层。如果缓存值可用，则再次返回promise，但此时promise会立即解析，而不会发出请求：

getData: function() {
    return storeData ? $q.when(storeData) : $http.get('/example.json').then(function(response) {
        storeData = response.data;
        return storeData;
    })
}

演示：http://plnkr.co/edit/bM6AK5sEQ5ZEEad4BVUu?p=preview