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的情况下使视图等待数据服务。有没有其他人有这个问题？提前谢谢。

更新 *

通过一些谷歌搜索，我很确定我需要为我的$ routeProvider添加一个解析，$routeProvider目前看起来像这样：

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

Answer 1

当您调用dataService.getJsonData()时，它不返回$ http.get返回的数据，它将返回将来使用数据实现的承诺。我建议你阅读承诺。您可以阅读角度实现here。

正如我所提到的，该函数返回一个将被履行的承诺，因此您需要在履行承诺时在范围内设置数据。将您的控制器更改为：

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;

            })
        });     
    };

从角度promises docs

//因为这个fn在事件循环的未来转向中执行异步，我们需要换行我们的代码进入$ apply调用，以便模型更改正确观察到的。

编辑：正如OdeToCode指出的那样，实际上并不需要这样做。原因是http.get返回的是一个Angular承诺，它已经在.then（）回调内部进行了$ apply。

AngularJS视图不等待$ http.get

4 个答案: