AngularJS：送信とサーバー応答の間のすべてのフォームコントロールを無効にする

ユーザーが[保存]ボタンまたは[送信]ボタンをクリックしたときに、フォームコントロールを無効にする（または少なくともユーザーインタラクションで利用できないようにする）場合、どの方法が最適（かつ正しい）かというジレンマがあります。そして、データはネットワーク上を移動します。私はJQuery（これは悪です!!!）を使用したくないし、すべての要素を配列として（クラスまたは属性マーカーによって）クエリしたくありません。

• cm-form-control「data-sent」と「data-processed」の2つの通知をサブスクライブするカスタムディレクティブですべての要素をマークします。次に、カスタムコードは2番目の通知をプッシュするか、Promiseを解決します。
• promiseTracker（不愉快に！）強制することを使用して、などの非常に愚かなコードを生成しますng-show="loadingTracker.active()"。明らかに、すべての要素がng-disabledそうであるわけではなく、ユーザーng-hide/showが「ダンス」ボタンを避けたくありません。
• 弾丸をかじりながらjQueryを使用する

より良いアイデアを持っている人はいますか？前もって感謝します！

更新： フィールドセットのアイデアは機能します。まだ同じことをしたい人のための簡単なフィドルがありますhttp://jsfiddle.net/YoMan78/pnQFQ/13/

HTML：

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

とJS：

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});

すべてのフィールドをラップフィールドセットして使用ngDisabledこのようにディレクティブを：

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

フィールドセット内のすべての入力を自動的に無効にします。

次に、コントローラでhttp呼び出しの前と後に設定$scope.isSavingします。truefalse

最新のブラウザには簡単な解決策があります：

1. CSSクラスを定義する

   .disabled {
     pointer-events: none;
     ... ...
   }

2. このクラスを追加 ng-form

   <ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>

以下は、ポインタとイベントの対応表です。

注：を設定pointer-events: noneした場合でも、キーボードでTabキーを押して要素を入力できます。