如何禁用 UI，直到服务器使用 AngularJS 做出响应答案

【问题标题】：how to disable the UI until a response from the server with AngularJS如何禁用 UI，直到服务器使用 AngularJS 做出响应
【发布时间】：2013-08-11 08:38:42
【问题描述】：

我正在使用angularjs 和nodejs (express) 构建一个网络应用程序。

很多时候，在我的应用程序中，用户会做一些与服务器通信的事情，并根据结果发生事情。

每当用户调用需要服务器响应的东西时，我希望 UI 处于暂停状态，并且不会让用户做任何其他事情。从而防止用户多次单击按钮并使我的服务器超载。

【问题讨论】：

标签： angularjs nodejs express javascript node.js twitter-bootstrap angularjs express

【解决方案1】：

如果可以，请避免这样做。只要有可能，即使您有待处理的呼叫，也允许用户继续执行操作。

当你不能时，你可以使用Bootstrap modal，它会用掩码元素覆盖页面。完成后移除模态框。您可以通过使用模态的设置来使其相当不显眼。

当然，您的应用程序也可以有一个标志，表明对服务器有一个未完成的请求（可能使用 jQuery 的 ajaxStart 和 ajaxStop），并在设置该标志时禁用进一步的操作。

【讨论】：

【解决方案2】：

您可以在按钮上使用ng-disabled 指令在单击一次后禁用该按钮。

控制器：

$scope.isDisabled = false;

$scope.submitForm = function() {
    $scope.isDisabled = true;
    // submit form and wait for response here
    // reset isDisabled when you get it
}

HTML：

 <button ng-click="submitForm()" disabled="{{scope.isDisabled}}">Submit</button>

如果您需要更通用的东西，Angular 的 ajax interceptors 可以让您在请求之前和收到响应时设置变量。您可以使用它来自定义 UI，根据拦截器是否已完成来禁止您想要停止的内容。

【讨论】：