2

我正在使用angular-ui/ui-router库提供的状态层次结构构建 Angular 应用程序。

我有一个需要几分钟才能完成的请求，因此目标是POST请求资源，然后轮询服务器以确定请求何时完成。该应用程序非常大，站点的不同区域被组织成不同的解耦模块，但标题由公共根状态管理。

为了在不干扰浏览会话的情况下向用户发送完成事件，我想：

  • 发出请求时，将“加载”微调器添加到应用程序的标头
  • 允许用户继续浏览网站但保留“加载”微调器
  • 一旦轮询确定请求已完成，将微调器替换为“检查”图标。

我如何封装这个过程并允许它继续运行多个状态转换？

4

2 回答 2

2

您可以创建子状态将从中继承的抽象状态。添加一个轮询长时间运行请求状态的服务。$scope.$parent所有子状态都可以通过该属性访问抽象控制器。

于 2013-05-16T17:09:05.667 回答
1

我不完全确定 ui-router 是如何工作的，但如果它类似于 $routeProvider （或者您也在使用 $routeProvider ），您可以将控制器分配给“应用程序的标题”并让该控制器执行工作。

以下是它如何工作的基本示例。_handleLoad 模拟轮询服务器，完成后，您可以轻松更改标题（或使用 $broadcast 更改站点的其余部分）。$routeProvider 让用户在 HeaderCtrl 继续在页面上执行时浏览站点。

http://plnkr.co/edit/EYqcjhX8kI1GmkYs5VZe?p=preview

app.controller('HeaderCtrl', function ($scope, $timeout) {
  var _i = 0,
      _handleLoad = function () {
        console.log('checking..');
        // TODO check the server here, fire the $timeout in the callback if the process isn't complete
        if (_i == 3) {
          $scope.loading = false;
          _i = 0;
          $scope.headerText = 'we have loaded something';
          console.log('all done');
          return;
        }
        _i += 1;

        $timeout(_handleLoad, 1000);
      };

  $scope.headerText = 'click here to load something';
  $scope.loading = false;

  $scope.load = function () {
    $scope.loading = true;
    _handleLoad();
  }
});
于 2013-05-16T17:18:41.377 回答