AngularJS: menonaktifkan semua kontrol formulir antara pengiriman dan respons server

Saya memiliki dilema tentang pendekatan apa yang terbaik (dan benar) jika saya ingin menonaktifkan kontrol formulir (atau setidaknya membuatnya tidak tersedia untuk interaksi pengguna) selama periode waktu ketika pengguna mengklik tombol "Simpan" atau "Kirim" dan data berjalan melalui kabel. Saya tidak ingin menggunakan JQuery (yang jahat !!!) dan menanyakan semua elemen sebagai array (berdasarkan penanda kelas atau atribut) Ide yang saya miliki sejauh ini adalah:

• Tandai semua elemen dengan cm-form-controlperintah khusus yang akan berlangganan 2 pemberitahuan: "data-sent" dan "data-processing". Kemudian kode khusus bertanggung jawab untuk mendorong pemberitahuan kedua atau menyelesaikan sebuah janji.
• Gunakan promiseTrackeryang (sayangnya!) Memaksa untuk menghasilkan kode yang sangat bodoh seperti ng-show="loadingTracker.active()". Jelas tidak semua elemen memiliki ng-disableddan saya tidak ingin pengguna ng-hide/showmenghindari tombol "menari".
• Gigit peluru dan tetap gunakan JQuery

Apakah ada yang punya ide yang lebih baik? Terima kasih sebelumnya!

DIPERBARUI: Ide fieldset BERLAKU. Berikut ini biola sederhana bagi mereka yang masih ingin melakukan hal yang sama 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>

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

Bungkus semua bidang Anda di fieldset dan gunakan direktif ngDisabled seperti ini:

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

Ini secara otomatis akan menonaktifkan semua input di dalam fieldset.

Kemudian dalam pengontrol diatur $scope.isSavingke truesebelum panggilan http dan falsesetelah.

Ada solusi sederhana di peramban modern:

1. tentukan kelas css

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

2. tambahkan kelas ini ke ng-form

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

Berikut adalahbagan dukungan peristiwa penunjuk .

Catatan: bahkan jika Anda menyetelnya pointer-events: none, Anda masih bisa tab ke elemen masukan dengan keyboard Anda.