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

Question

我想从JSON文件中读取数组并将其放入Factory中，以便它可以用作服务，然后使用服务填充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" 
}] 

当我运行所有这些代码在一起，我只是得到了一个空白页面。我已经能够显示在NG-重复阵列与$ http.get（）直接在控制器中调用（从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}; 
});