AngularJS：ng-repeatで使用するためにJSONファイルをファクトリに読み込みます

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" 
}] 

私は一緒にこのコードのすべてを実行すると、私は空白の画面を取得。私は...（）（以下のコードを参照してください、this questionから）コントローラに直接呼び出す

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

$ http.getでNGリピートの配列を表示することができました...しかし、私はしたいですこの配列はグローバルにアクセス可能です。私は工場を働かせるように見えない。

私はサービスから、または非同期転送で私の配列を呼び出す方法に問題があると思います。 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}; 
});