javascript - AngularJS でサーバーからの応答があるまで UI を無効にする方法

Question

angularjsとnodejs ( express ) を使用して Web アプリを構築しています。

私のアプリでは、ユーザーがサーバーと通信することを何度も行い、結果に応じて物事が起こります。

ユーザーがサーバーからの応答を必要とする何かを呼び出すたびに、UI を保留にして、ユーザーが他に何もできないようにしたいと考えています。したがって、ユーザーがボタンを何度もクリックしてサーバーに過負荷をかけるのを防ぎます。

Answer 1

可能な場合は、これを避けてください。保留中の通話がある場合でも、可能な限り、ユーザーが操作を続行できるようにします。

できない場合は、マスキング要素でページをオーバーレイするBootstrap modalを使用できます。完了したら、モーダルを削除します。モーダルの設定をいじることで、これをかなり控えめにすることができます。

もちろん、別の方法として、サーバーへの未処理のリクエストがあることを示すフラグをアプリケーションに設定し (おそらく jQuery のajaxStartとを使用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 をカスタマイズし、インターセプターが完了したかどうかに基づいて停止したいものを禁止できます。