Question

当我的角度应用程序首次加载时，我需要对一些相当大的数据进行一些请求。然后，此数据将用于控制器和服务，以确定如何显示页面。我收到各种各样的JavaScript错误，因为控制器和服务在请求返回之前试图访问这些数据。

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

无论如何以某种方式处理控制器和服务中的异步数据？
有没有办法阻止角度尝试渲染页面，直到数据返回后？这基本上使数据请求同步，我很好。这只会在最初的完整HTML页面上加载。

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

Answer 1

基本流程应该是这样的：在您的控制器函数内部，发出$ http请求，并在success（）回调中，根据需要设置$ scope变量。你的流程与那个不同吗？

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

你的控制器看起来像这样：

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

您的观点将如下所示：

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

修改

我在这里修改了你的jsfiddle：

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

它按预期工作，问题是你试图访问未定义变量的属性，这是一个错误。此外，在第三次测试中，变量被命名为错误，但在命名正确时仍需要进行检查。

我推荐coffeescript，因为那些if语句可以通过存在（？）运算符更加简洁，如下所示：

myLargeData?.data

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

Answer 2

我建议您使用路由器的resolve来加载和处理所有必需的数据。只有在实际解析了所有结算后，才会执行控制器。因此，在完成请求并处理数据之前，视图将不会呈现。我相信这是一种更优雅和推荐的方法。

此外，您应该将所有数据加载和处理逻辑提取到单独的服务中，并从解决方案将工作转发到您的服务。您的服务应返回一个promise对象，该对象将在所有处理完成后解析。

请参阅the documentation for $routeProvider（“解决”属性）。

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

2 个答案: