AngularJS：将 JSON 数组从文件读取到工厂中以用于 ng-repeat

Question

我想从 JSON 文件中读取一个数组并将其放入工厂，以便将其用作服务，然后使用该服务填充 ng-repeat。这一切都会在页面加载时发生。

HTML：

<div ng-app="pageApp" ng-controller="productStreamCtrl">
    <div ng-repeat="product in products">
        <div>
            {{product.title}}
        </div>
        <div>
            {{product.descr}}
        </div>
    </div>
</div>

JS（来自this question）：

var pageApp = angular.module('pageApp', []);

pageApp.controller('productStreamCtrl', function($scope, ProductStreamService) {
    $scope.products = ProductStreamService.obj.products; //Not sure how to call my array?
});

pageApp.factory('ProductStreamService', function($http) { 

    var obj = {products:null};

    $http.get('products.json').then(function(data) {
        obj.products = data;
    });  

    return obj;
});

JSON：

[{
    "title" : "Title 1",
    "descr" : "Description for product 1"
},{
    "title" : "Title 2",
    "descr" : "Description for product 2"
},{
    "title" : "Title 3",
    "descr" : "Description for product 3"
},{
    "title" : "Title 4",
    "descr" : "Description for product 4"
}]

当我一起运行所有这些代码时，我只是得到一个空白屏幕。我已经能够直接在控制器中通过 $http.get() 调用在 ng-repeat 中显示数组（来自this question，请参见下面的代码）...

pageApp.controller('productStreamCtrl', function($scope, $http) {
    $http.get('products.json')
        .then(function(result){
            $scope.products = result.data;                
});

...但我希望这个数组可以全局访问。我似乎无法让工厂开工。

我认为问题可能在于我如何从服务中调用我的数组或异步传输。我确实收到了 JSON 语法错误，但我在工作控制器示例中遇到了同样的错误。有什么想法吗？

Answer 1

当您设置变量时，您的承诺尚未完成。更改您的工厂以返回一个函数，然后在您的控制器中调用该函数。

var pageApp = angular.module('pageApp', []);

pageApp.controller('productStreamCtrl', function($scope, ProductStreamService) {
    ProductStreamService.getProducts().then(function(data){
        $scope.products = data;
    }); 
});

pageApp.factory('ProductStreamService', function($http) { 


    function getProducts(){
       return $http.get('products.json').then(function(data) {
            return data;
        }); 
    } 

    return {getProducts: getProducts};
});