AngularJS：禁用提交和服务器响应之间的所有表单控件
如果我想在用户点击“保存”或“提交”button的某个时间段期间禁用表单控件（或者至less使其不可用于用户交互），那么什么是最好的（和正确的）方法是两难的和通过电线传输的数据。 我不想使用JQuery（这是邪恶的！），并查询所有元素作为数组（通过类或属性标记）我到目前为止的想法是：
- 用
cm-form-control自定义指令标记所有的元素，它将订阅2个通知：“数据发送”和“数据处理”。 然后自定义代码负责推送第二个通知或解决承诺。 - 使用
promiseTracker（不幸的是！）强制产生非常愚蠢的代码，如ng-show="loadingTracker.active()"。 很明显，并不是所有的元素都有ng-disabled，我不想用ng-hide/show来避免“跳舞”button。 - 咬一口子，仍然使用JQuery
有没有更好的主意？ 提前致谢！
更新： fieldset的想法工作。 这是一个简单的小提琴那些仍然想要做同样的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); }; });
把所有的字段放在字段集中，像这样使用ngDisabled指令：
<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>
它会自动禁用字段集内的所有input。
然后在控制器中设置$scope.isSaving为true http调用之前，并false 。
现代浏览器中有一个简单的解决scheme：
-
定义一个css类
.disabled { pointer-events: none; ... ... } -
将这个类添加到
ng-form<ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>
这里是指针事件支持图表。
注意：即使你设置了pointer-events: none ，你仍然可以用键盘input元素。
