AngularJS: deshabilitar todos los controles de formulario entre enviar y la respuesta del servidor
Tengo un dilema sobre cuál es el mejor enfoque (y el correcto) si deseo deshabilitar los controles de formulario (o al menos hacer que no estén disponibles para la interacción del usuario) durante un período de tiempo cuando el usuario hace clic en el botón "Guardar" o "Enviar" y datos viajando a través del cable. No quiero usar JQuery (¡lo cual es malo!) Y consultar todos los elementos como matriz (por clase o marcador de atributo) Las ideas que tenía hasta ahora son:
Marcar todos los elementos concm-form-control
directiva personalizada que se suscribirá para 2 notificaciones: "datos enviados" y "datos procesados". Luego, el código personalizado es responsable de enviar una segunda notificación o resolver una promesa.UtilizarpromiseTracker
eso (¡desafortunadamente!) exige producir código extremadamente estúpido comong-show="loadingTracker.active()"
. Obviamente no todos los elementos tienenng-disabled
y no quiero usarng-hide/show
para evitar los botones de "bailar".Muerde una bala y aún usa JQuery¿Alguien tiene una idea mejor? ¡Gracias por adelantado!
ACTUALIZADO: La idea del conjunto de campos sí funciona. Aquí hay un violín simple para aquellos que todavía quieren hacer lo mismo.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>
y 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);
};
});