Eu tenho um dilema sobre qual é a melhor (e correta) abordagem se eu quiser desativar os controles de formulário (ou pelo menos torná-los indisponíveis para a interação do usuário) durante um período em que o usuário clica no botão "Salvar" ou "Enviar" e dados viajando pelo fio. Não quero usar o JQuery (o que é mau !!!) e consultar todos os elementos como array (por marcador de classe ou atributo). As idéias que tive até agora são:
- Marque todos os elementos com a
cm-form-control
diretiva personalizada, que assinará duas notificações: "dados enviados" e "dados processados". Em seguida, o código personalizado é responsável por enviar a segunda notificação ou resolver uma promessa. - Use
promiseTracker
isso (infelizmente!) Impõe para produzir códigos extremamente estúpidos comong-show="loadingTracker.active()"
. Obviamente, nem todos os elementos têmng-disabled
e eu não quero que o usuáriong-hide/show
evite "dançar" os botões. - Morda uma bala e ainda usa JQuery
Alguém tem uma idéia melhor? Desde já, obrigado!
ATUALIZADO: A idéia do fieldset funciona. Aqui está um violino simples para aqueles que ainda querem fazer o mesmo 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>
e 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);
};
});
javascript
forms
angularjs
submit
YoMan78
fonte
fonte
fieldset
não pode ser usado como um recipiente flexboxRespostas:
Coloque todos os seus campos no fieldset e use a diretiva ngDisabled da seguinte maneira:
Desabilitará automaticamente todas as entradas dentro do fieldset.
Em seguida, no controlador definido
$scope.isSaving
comotrue
antes da chamada http efalse
depois.fonte
Existe uma solução simples nos navegadores modernos:
definir uma classe css
adicione esta classe a
ng-form
Aqui está ográfico de suporte a eventos de ponteiro .
Nota: mesmo se você definir
pointer-events: none
, ainda poderá tabular para inserir o elemento com o teclado.fonte