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:
- Marque todos los elementos con
cm-form-control
una 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. - Use
promiseTracker
eso (¡desafortunadamente!) Aplica para producir código extremadamente estúpido comong-show="loadingTracker.active()"
. Obviamente, no todos los elementos tienenng-disabled
y no quiero que el usuariong-hide/show
evite los botones "bailando". - 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);
};
});
fieldset
no se puede usar como un contenedor flexbox