AngularJS視圖不等待$ http.get

Question

在我的控制器中，我有以下......

$scope.products = dataService.getJsonData();
console.log($scope.products);

在我的dataservice中，我有以下內容

.service('dataService', function ($http) {

        this.getJsonData = function () {
            return $http.get('path/to/json/products.json').then(function (response) {

                // don't send back everything....
                var productData = response.data;
                console.log(productData);
                return productData;

            });

        };

在我看來，我有以下......

<div ng-repeat="product in products">

    Name: {{ product.name }} <br>
    Price: {{ product.price }}
    <hr>
</div>

在我的渲染視圖中，重復只顯示3個項目（產品是15個對象的數組）。 在查看控制台時，視圖或產品中的重復由Object { then=function(), catch=function(), finally=function()}但dataservice中的日志輸出所需的對象數組。 我不明白為什么輸出不等待返回的數據，我以為這是異步的？ 如何在不使用$timeout情況下使視圖等待dataservice。 有沒有其他人有這個問題？ 提前致謝。

更新*

從一點谷歌搜索我很確定我需要為我的$ routeProvider添加一個解決方案， $routeProvider目前看起來像這樣：

.when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl',
      resolve:{
        // i need to put something here...
      }
  })

Answer 1

當您調用dataService.getJsonData()它不返回$ http.get返回的數據，它返回將來使用數據實現的promise。 我建議你閱讀承諾。 您可以在這里閱讀角度實現。

正如我所提到的，該函數返回一個將被履行的承諾，因此您需要在履行承諾時在范圍內設置數據。 將您的控制器更改為：

dataService.getJsonData().then(function (products) {
    $scope.products = products
})

Answer 2

嗯不確定它是否會有所幫助，因為角度是異步的，但在使用數據之前嘗試將其添加到控制器中。

dataService.getJsonData().success(function (response){
  $scope.products = response
})

Answer 3

使用$ resource它會更容易，像這樣：

dataService.factory('getJsonData', ['$resource',
  function($resource) {
    return $resource('path/to/json/products.json');
  }
]);

其他部分是相同的。

Answer 4

實際更新發生在回調中，因此您需要將其包裝在$ apply中。 因為它發生在服務中，所以必須使用$ rootscope

.service('dataService', function ($http,$rootScope) {

    this.getJsonData = function () {

        return $http.get('path/to/json/products.json').then(function (response) {
            $rootScope.$apply(function () {
                // don't send back everything....
                var productData = response.data;
                console.log(productData);
                return productData;

            })
        });     
    };

來自角度承諾文檔

//因為這個fn在事件循環的未來轉向中執行異步，我們需要將代碼包裝到$ apply調用中，以便正確觀察模型更改。

編輯：正如OdeToCode指出的那樣，這真的不需要。 原因是http.get返回的是一個Angular promise，它已經在.then（）回調內部進行了$ apply。