AngularJS: disabling all form controls between submit and server response

如果我想在用户点击“保存”或“提交”按钮和数据通过网络传输的时间段内禁用表单控件(或者至少让它们不能用于用户交互) ，那么什么是最好(也是正确)的方法呢。我不想使用 JQuery (这是邪恶的! ! !)并将所有元素作为数组(通过类或属性标记)进行查询 到目前为止我的想法是:

  • 使用 cm-form-control自定义指令标记所有元素，该指令将订阅2个通知: “ data-sent”和“ data-Processing”。然后自定义代码负责推送第二个通知或解决承诺。
  • 使用 promiseTracker(不幸的是!)强制生成像 ng-show="loadingTracker.active()"这样极其愚蠢的代码。显然不是所有的元素都有 ng-disabled，我不想用 ng-hide/show来避免“跳舞”按钮。
  • 咬紧牙关仍然使用 JQuery

谁有更好的主意? 先谢谢你！

现场设置的想法行得通。这里有一个简单的小提琴给那些仍然想做同样的 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);
};
});
96059 次浏览
小开
最佳答案

在 现场准备中包装所有字段并使用 ngDisabled指令，如下所示:

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

它将自动禁用字段集中的所有输入。

然后在控制器设置 $scope.isSaving到 true之前的 http 调用和 false之后。

小开

在现代浏览器中有一个简单的解决方案:

  1. 定义一个 css 类

    .disabled {
pointer-events: none;
... ...
}

  2. add this class to ng-form

    <ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>

Here is the pointer-events support chart.

Note: even if you set pointer-events: none, you can still tab to input element with your keyboard.


提交答案