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。