AngularJS: отключает все элементы управления формой между ответом отправки и сервером

У меня есть дилемма о том, какой лучший (и правильный) подход, если я хочу отключить элементы управления формой (или, по крайней мере, сделать их недоступными для взаимодействия с пользователем) в течение периода времени, когда пользователь нажимает на "Сохранить" или "Сохранить", Отправить "и данные, перемещающиеся по проводу. Я не хочу использовать JQuery (который является злом!!!) и запрашивать все элементы как массив (маркером или атрибутом) Идеи, которые я имел до сих пор:

Отметьте все элементы с настраиваемой директивой cm-form-control, которая будет подписана на 2 уведомления: "отправлено данные" и "обработана данными". Затем пользовательский код отвечает за то, чтобы нажать второе уведомление или решить обещание.
Используйте promiseTracker, который (к несчастью!) обеспечивает получение крайне глупого кода, например ng-show="loadingTracker.active()". Очевидно, что не все элементы имеют ng-disabled, и я не хочу, чтобы пользователь ng-hide/show избегал "танцевальных" кнопок.
Укусить пулю и использовать JQuery

Есть ли у кого-нибудь лучшее представление? Спасибо заранее!

ОБНОВЛЕНО: Идея fieldset работает. Вот простая скрипка для тех, кто все еще хочет сделать то же самое 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);
    };
});

Ответ 1

Оберните все свои поля в поле fieldset и используйте директиву ngDisabled:

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

Он автоматически отключит все входы внутри набора полей.

Затем в контроллере установите $scope.isSaving в true перед http-вызовом и false после.

Ответ 2

В современных браузерах есть простое решение:

определить класс css

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

добавьте этот класс в ng-form

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

Здесь - это таблица поддержки указателей-событий.

Примечание: даже если вы установили pointer-events: none, вы все равно можете вставить элемент ввода с помощью клавиатуры.