Trying to figure out the best way to disable form controls temporarily when a user clicks a "Save" or "Submit" button and data is being processed. I prefer not to use JQuery and avoid querying elements as an array based on class or attribute.
- One idea is to mark all form elements with a custom directive called
cm-form-control. This directive will listen for two notifications: "data-sent" and "data-processed". Custom code will handle pushing the second notification or resolving a promise. - Another option is to use
promiseTracker, which unfortunately requires using cumbersome code like
. Not all elements have the ng-disabled attribute, and using ng-hide/show may result in buttons appearing to "dance".ng-show="loadingTracker.active()" - The last resort would be to reluctantly resort to using JQuery.
Any better ideas out there?
UPDATED: Using the fieldset approach does indeed work. Here's a simple demo for those interested: 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);
};
});