AngularJS: vô hiệu hóa tất cả các điều khiển biểu mẫu giữa phản hồi gửi và máy chủ

Tôi có một tình huống khó xử về cách tiếp cận tốt nhất (và đúng) nếu tôi muốn tắt các điều khiển biểu mẫu (hoặc ít nhất là làm cho chúng không khả dụng cho người dùng tương tác) trong một khoảng thời gian khi người dùng nhấp vào nút "Lưu" hoặc "Gửi" và dữ liệu truyền qua dây. Tôi không muốn sử dụng JQuery (thật tệ hại !!!) và truy vấn tất cả các phần tử dưới dạng mảng (theo lớp hoặc điểm đánh dấu thuộc tính) Ý tưởng mà tôi có cho đến nay là:

• Đánh dấu tất cả các phần tử bằng cm-form-controlchỉ thị tùy chỉnh sẽ đăng ký nhận 2 thông báo: "đã gửi dữ liệu" và "đã xử lý dữ liệu". Sau đó, mã tùy chỉnh chịu trách nhiệm đẩy thông báo thứ hai hoặc giải quyết một lời hứa.
• Sử dụng promiseTrackerđiều đó (không may!) Thực thi để tạo ra mã cực kỳ ngu ngốc như ng-show="loadingTracker.active()". Rõ ràng là không phải tất cả các yếu tố đều có ng-disabledvà tôi không muốn người dùng ng-hide/showtránh các nút "nhảy múa".
• Cắn một viên đạn và vẫn sử dụng JQuery

Có ai có một ý tưởng tốt hơn? Cảm ơn trước!

CẬP NHẬT: Ý tưởng tập trường KHÔNG hoạt động. Đây là một trò chơi đơn giản cho những ai vẫn muốn làm điều tương tự 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>

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

Quấn trên mọi lĩnh vực của bạn trong fieldset và sử dụng ngDisabled chỉ thị như thế này:

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

Nó sẽ tự động vô hiệu hóa tất cả các đầu vào bên trong tập trường.

Sau đó, trong bộ điều khiển được đặt $scope.isSavingthành truetrước cuộc gọi http và falsesau đó.

Có một giải pháp đơn giản trong các trình duyệt hiện đại:

1. xác định một lớp css

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

2. thêm lớp này vào ng-form

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

Đây làbiểu đồ hỗ trợ con trỏ-sự kiện .

Lưu ý: ngay cả khi bạn đặt pointer-events: none, bạn vẫn có thể tab để nhập phần tử bằng bàn phím của mình.