AngularJS: Deaktivieren aller Formularsteuerelemente zwischen Senden und Serverantwort

Ich habe ein Dilemma darüber, was der beste (und richtige) Ansatz ist, wenn ich Formularsteuerelemente während eines Zeitraums, in dem der Benutzer auf die Schaltfläche "Speichern" oder "Senden" klickt, deaktivieren (oder zumindest für die Benutzerinteraktion nicht verfügbar machen) möchte und Daten, die über das Kabel übertragen werden. Ich möchte JQuery nicht verwenden (was böse ist !!!) und alle Elemente als Array abfragen (nach Klassen- oder Attributmarker). Die Ideen, die ich bisher hatte, sind:

• Markieren Sie alle Elemente mit einer cm-form-controlbenutzerdefinierten Direktive, die zwei Benachrichtigungen abonniert: "Daten gesendet" und "Daten verarbeitet". Dann ist der benutzerdefinierte Code dafür verantwortlich, die zweite Benachrichtigung zu senden oder ein Versprechen zu lösen.
• Verwenden Sie promiseTrackerdas (leider!) Erzwingt, um extrem dummen Code wie zu produzieren ng-show="loadingTracker.active()". Offensichtlich haben nicht alle Elemente ng-disabledund ich möchte nicht, dass Benutzer ng-hide/show"tanzende" Schaltflächen vermeiden.
• Beißen Sie eine Kugel und verwenden Sie immer noch JQuery

Hat jemand eine bessere Idee? Danke im Voraus!

AKTUALISIERT: Die Fieldset-Idee funktioniert. Hier ist eine einfache Geige für diejenigen, die immer noch das Gleiche tun möchten: 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>

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

Wickeln Sie alle Ihre Felder in fieldset ein und verwenden Sie die Anweisung ngDisabled wie folgt :

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

Alle Eingaben im Feldset werden automatisch deaktiviert.

Dann im Controller $scope.isSavingauf truevor http-Aufruf und falsenach einstellen .

In modernen Browsern gibt es eine einfache Lösung:

1. Definieren Sie eine CSS-Klasse

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

2. füge diese Klasse hinzu ng-form

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

Hier ist die Zeiger-Ereignisse Unterstützung Chart.

Hinweis: Auch wenn Sie festlegen pointer-events: none, können Sie mit Ihrer Tastatur auf das Eingabeelement tippen.