在 AngularJS 中加载异步数据

Question

调用函数时出现 Cannot read property of undefined 错误，但数据显示正确。

根据我目前所读到的内容，这是因为 AngularJS 异步加载数据，我应该使用 promises 来避免这种情况。

我在网上搜索过 Angular 的文档，但我不明白如何使用它。

如果有人能帮助我，我将不胜感激。

目前，我有以下代码：

.factory('Test', ['$resource', function ($resource) {
  return $resource('data.json');
}])

.controller('MyCtrl', ['$scope', 'Test', function($scope, Test) {

Test.get(function (data) {
  $scope.myData = data;
});

$scope.myFunction = function() {
  var min = $scope.myData.min;
  var max = $scope.myData.max;
  var diff = max - min;
  return diff;
}

}])

这是一个 Plunker：http://plnkr.co/edit/3AK70uVbNSdhAIIfdkHb?p=preview

Answer 1

只需定义$scope.myData = {}

例如对于您的代码：

angular.module('myApp', ['ngResource'])

.factory('Test', ['$resource', function ($resource) {
  return $resource('data.json');
}])

.controller('MyCtrl', ['$scope', 'Test', function($scope, Test) {
  $scope.myData = {}  // <--- That's what I have defined
  Test.get(function (data) {
      $scope.myData = data;
  });

  $scope.myFunction = function() {
      var min = $scope.myData.min;
    var max = $scope.myData.max;
    var diff = max - min;
    return diff;
  }

}])

Answer 2

在填充 $scope.myData 之前，您不应该使用 $scope.myData.min，正如您所说的那样，它是异步的，因此可能需要一些时间。在这种情况下，最简单的解决方案是将您的代码包装到 if-block:

$scope.myFunction = function() {
  if ($scope.myData) {
    var min = $scope.myData.min;
    var max = $scope.myData.max;
    var diff = max - min;
    return diff;
  }
}

myFunction 将在每个摘要周期中进行检查，因此一旦 $scope.myData 可用，该函数将正确评估 return diff。

但是，更好的方法是使用由资源 return 编辑的 promise 对象。在这种情况下，您可以这样做：

function myFunction(myData) {
  var min = myData.min;
  var max = myData.max;
  var diff = max - min;
  return diff;
}

Test.get().$promise.then(myFunction).then(function(data) {
  $scope.myData = data;
});

并且在 HTML 中使用 myData 没有函数：

<div ng-controller="MyCtrl">
  {{myData}}
</div>

演示： http://plnkr.co/edit/2SSk2lChkbvm5ffbHF2n?p=preview

Answer 3

您的代码很好，可能需要稍作修改以避免

Cannot read property of undefined error

$scope.myData = Test.get();

那你可以

$scope.myFunction = function() {
    var min = $scope.myData.min;
    var max = $scope.myData.max;
    var diff = max - min;
    return diff || 0;
}

https://docs.angularjs.org/api/ngResource/service/$resource

在 AngularJS 中加载异步数据

Loading asynchronous data in AngularJS

javascript

asynchronous

promise

angularjs

angular-promise