javascript - AngularJS - 如何处理 Controller /服务中所需数据的长时间运行请求

Question

当我的 Angular 应用首次加载时，我需要对一些相当大的数据发出几个请求。然后在 Controller 和服务中使用此数据来确定如何显示页面。我收到各种 JavaScript 错误，因为 Controller 和服务试图在请求返回之前访问此数据。

我知道在 HTML 页面中，您可以绑定(bind)到这个异步数据，当请求返回时，angular 会为您填充它。但是，基于此数据，我的 Controller 和服务中发生了一些非常复杂的逻辑。所以，我想我有 2 个问题。

1. 有没有办法以某种方式处理 Controller 和服务中的异步数据？
2. 有没有办法阻止 Angular 在数据返回之前尝试呈现页面？这基本上使数据请求同步，我对此表示满意。这只会在初始完整 HTML 页面加载时出现。

我在 jsFiddle 上的尝试可以在这里找到:http://jsfiddle.net/sES9T/

Answer 1

基本流程应该是这样的:在您的 Controller 函数中，发出 $http 请求，并在 success() 回调中，根据需要设置您的 $scope 变量。您的流程与此不同吗？

此外，使用 ng-show 指令隐藏您的 DOM 元素，直到范围包含您需要的数据。

你的 Controller 看起来像这样:

MyCtrl = ( $scope, $http ) ->
  promise = $http.get "/url"
  promise.success ( data ) ->
    $scope.foo = data

您的 View 将如下所示:

div(ng-show="foo")
  p Here is my data, and some other stuff
  p {{ foo }}

编辑

我在这里修改了你的 jsfiddle:

http://jsfiddle.net/sES9T/4/

它按预期工作，问题是您试图访问 undefined variable 的属性，这会引发错误。还有，在第三次测试中，变量命名错误，但命名正确时仍需要检查。

我推荐 coffeescript，因为这些 if 语句可以使用存在性 (?) 运算符变得更加简洁，如下所示:

myLargeData?.data

该代码将在尝试访问其属性之前检查 myLargeData 是否已定义且非空，就像我在上面手动完成的那样。如果它是 undefined 或 null，它将返回 undefined，而不是导致错误。