AngularJS：禁用提交和服務器響應之間的所有表單控件

Question

如果我想在用戶點擊“保存”或“提交”按鈕排序的一段時間內禁用表單控件（或至少使它們不可用於用戶交互），那么我遇到了什么是最好（和正確）方法的困境和通過電線傳輸的數據。 我不想使用JQuery（這是邪惡的!!!）並查詢所有元素作為數組（通過類或屬性標記）我到目前為止的想法是：

• 使用cm-form-control自定義指令標記所有元素，該指令將訂閱2個通知：“data-sent”和“data-processed”。 然后自定義代碼負責推送第二個通知或解決承諾。
• 使用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);
    };
});

Answer 1

將所有字段包裝在fieldset中並使用ngDisabled指令，如下所示：

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

它將自動禁用字段集內的所有輸入。

然后，在控制器中設置$scope.isSaving到true HTTP調用之前和false后。

Answer 2

現代瀏覽器中有一個簡單的解決方案：

1. 定義一個css類

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

2. 將此類添加到ng-form

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

這是指針事件支持圖表。

注意：即使你設置了pointer-events: none ，你仍然可以用鍵盤輸入元素。