AngularJS: відключення всіх елементів контролю між поданням та відповіддю сервера

У мене виникає дилема щодо того, який найкращий (і правильний) підхід, якщо я хочу відключити керування формами (або принаймні зробити їх недоступними для взаємодії з користувачем) протягом періоду часу, коли користувач натискає кнопку "Зберегти" або "Надіслати". і дані, що подорожують по дроту. Я не хочу використовувати JQuery (що є злом !!!) і запитувати всі елементи як масив (за класом або маркером атрибутів) Ідеї, які у мене були до цього часу:

• Позначте всі елементи cm-form-controlспеціальною директивою, яка підпишеться на 2 повідомлення: "надіслані дані" та "оброблені дані". Тоді користувацький код відповідає за надсилання другого повідомлення або вирішення обіцянки.
• Використовуйте 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);
    };
});

Загорніть все поля в FIELDSET і використовувати ngDisabled директиву , як це:

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

Він автоматично відключить усі входи всередині набору польових даних.

Потім у контролері встановлено $scope.isSavingдо truehttp дзвінка та falseпісля.

У сучасних браузерах є просте рішення:

1. визначити клас css

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

2. додати цей клас до ng-form

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

Тут є покажчик події підтримки діаграма.

Примітка: навіть якщо ви встановили pointer-events: none, ви все одно можете вкладати елемент введення елемента за допомогою клавіатури.