Question

调用函数时出现SourceLocation DestinationLocation \\abc\test\ \\def\test\ \\ghi\test\ \\jkl\test\错误，但数据显示正确。

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

我在线搜索和Angular的文档，但我不明白如何使用它。

如果有人能帮助我，我会很感激。

目前，我有以下代码：

Cannot read property of undefined

这是一个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 = {}

即可

e.g。为您的代码：

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/ $资源

在AngularJS中加载异步数据

3 个答案: