Mam dylemat co do tego, jakie jest najlepsze (i poprawne) podejście, jeśli chcę wyłączyć kontrolki formularza (lub przynajmniej uczynić je niedostępnymi dla interakcji użytkownika) w czasie, gdy użytkownik kliknie przycisk „Zapisz” lub „Prześlij” i dane przesyłane przez kabel. Nie chcę używać JQuery (co jest złe !!!) i sprawdzać wszystkie elementy jako tablicę (według klasy lub znacznika atrybutu). Do tej pory miałem następujące pomysły:
- Oznacz wszystkie elementy
cm-form-control
niestandardową dyrektywą, która zaprenumeruje 2 powiadomienia: „data-sent” i „data-processing”. Następnie kod niestandardowy jest odpowiedzialny za przekazanie drugiego powiadomienia lub zrealizowanie obietnicy. - Użyj
promiseTracker
tych (niestety!) Wymuszeń, aby stworzyć wyjątkowo głupi kod, taki jakng-show="loadingTracker.active()"
. Oczywiście nie wszystkie elementy mająng-disabled
i nie chcę, aby użytkownikng-hide/show
unikał „tańczących” przycisków. - Ugryź kulę i nadal używaj JQuery
Czy ktoś ma lepszy pomysł? Z góry dziękuję!
AKTUALIZACJA: Idea zestawu terenowego DZIAŁA. Oto proste skrzypce dla tych, którzy nadal chcą robić to samo 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>
i 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
źródło
źródło
fieldset
nie można go używać jako kontenera flexboxOdpowiedzi:
Owinąć wszystkie pola w zestaw pól i używać ngDisabled dyrektywę tak:
Automatycznie wyłączy wszystkie wejścia wewnątrz zestawu pól.
Następnie w kontrolerze ustawiony
$scope.isSaving
natrue
przed wywołaniem http i nafalse
później.źródło
W nowoczesnych przeglądarkach istnieje proste rozwiązanie:
zdefiniuj klasę CSS
dodaj tę klasę do
ng-form
Tutaj jest wskaźnik-events wykres wsparcie.
Uwaga: nawet jeśli ustawisz
pointer-events: none
, nadal możesz użyć klawisza Tab, aby wprowadzić element za pomocą klawiatury.źródło