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);
};
});
Ответы
Ответ 1
Оберните все свои поля в поле fieldset и используйте директиву ngDisabled:
<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>
Он автоматически отключит все входы внутри набора полей.
Затем в контроллере установите $scope.isSaving
в true
перед http-вызовом и false
после.
Ответ 2
В современных браузерах есть простое решение:
-
определить класс css
.disabled {
pointer-events: none;
... ...
}
-
добавьте этот класс в ng-form
<ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>
Здесь - это таблица поддержки указателей-событий.
Примечание: даже если вы установили pointer-events: none
, вы все равно можете вставить элемент ввода с помощью клавиатуры.