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

ตัดฟิลด์ทั้งหมดของคุณในfieldsetและใช้คำสั่งngDisabledดังนี้:

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

โดยอัตโนมัติจะปิดการใช้งานอินพุตทั้งหมดภายใน fieldset

จากนั้นในคอนโทรลเลอร์ตั้งค่า$scope.isSavingเป็นtrueก่อนการโทร http และfalseหลังจากนั้น

มีวิธีง่ายๆในเบราว์เซอร์สมัยใหม่:

1. กำหนดคลาส css

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

2. เพิ่มชั้นเรียนนี้ใน ng-form

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

นี่คือแผนภูมิการสนับสนุนตัวชี้เหตุการณ์

หมายเหตุ: แม้ว่าคุณจะตั้งค่าไว้pointer-events: noneคุณก็ยังสามารถแท็บเพื่อป้อนองค์ประกอบด้วยแป้นพิมพ์