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

Question

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

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

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

Answer 1

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

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

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

Answer 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拦截器可以让你在请求之前和收到响应时设置一个变量。您可以使用它来自定义 UI，根据拦截器是否已完成来禁止您想要停止的内容。