在AngularJS中加载异步数据

Question

我在调用函数时遇到Cannot read property of undefined错误的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.min直到$scope.myData填充，正如你所说正确的是异步这样可以花点时间。 在这种情况下，最简单的解决方案是将代码包装到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可用，该函数将评估并正确返回diff 。

但是 ，更好的方法是使用资源返回的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 2

只需定义$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 3

你的代码很好，可能需要稍加修改才能避免

无法读取未定义错误的属性

$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