AngularJS: désactivation de tous les contrôles de formulaire entre la soumission et la réponse du serveur

J'ai un dilemme sur la meilleure approche (et la bonne) si je veux désactiver les contrôles de formulaire (ou au moins les rendre indisponibles pour l'interaction de l'utilisateur) pendant une période pendant laquelle l'utilisateur clique sur le bouton "Enregistrer" ou "Soumettre" et les données voyageant sur le fil. Je ne veux pas utiliser JQuery (ce qui est mal !!!) et interroger tous les éléments sous forme de tableau (par classe ou marqueur d'attribut) Les idées que j'avais jusqu'à présent sont:

• Marquez tous les éléments avec cm-form-controlune directive personnalisée qui s'abonnera à 2 notifications: "données envoyées" et "données traitées". Ensuite, le code personnalisé est chargé d'envoyer une deuxième notification ou de résoudre une promesse.
• Utilisez promiseTrackercela (malheureusement!) Pour produire du code extrêmement stupide comme ng-show="loadingTracker.active()". Évidemment, tous les éléments n'ont pas ng-disabledet je ne veux pas que l'utilisateur ng-hide/showévite les boutons de "danse".
• Mordez une balle et utilisez toujours JQuery

Quelqu'un a-t-il une meilleure idée? Merci d'avance!

MISE À JOUR: L'idée de fieldset fonctionne. Voici un simple violon pour ceux qui veulent toujours faire de même 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>

et 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);
    };
});

Enveloppez tous vos champs dans fieldset et utilisez la directive ngDisabled comme ceci:

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

Il désactivera automatiquement toutes les entrées dans le fieldset.

Ensuite, dans le contrôleur, réglez $scope.isSavingsur trueavant l'appel http et sur falseaprès.

Il existe une solution simple dans les navigateurs modernes:

1. définir une classe css

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

2. ajouter cette classe à ng-form

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

Voici legraphique de prise en charge des événements de pointeur .

Remarque: même si vous définissez pointer-events: none, vous pouvez toujours tabuler pour entrer l'élément avec votre clavier.