AngularJS:在提交和服务器响应之间禁用所有表单控件

I have a dilemma about what is the best (and correct) approach if I want to disable form controls (or at least make them unavailable for user interaction) during a period of time when user clicks sort of "Save" or "Submit" button and data travelling over the wire. I don't want to use JQuery (which is evil!!!) and query all elements as array (by class or attribute marker) The ideas I had so far are:

如果我想在用户单击某种“保存”或“提交”按钮并在网络上传输数据时禁用表单控件(或至少使它们不能用于用户交互)，我就会陷入两难境地。我不想使用JQuery(这是邪恶的!!!)并将所有元素查询为数组(按类或属性标记)，我到目前为止的想法是:

Mark all elements with cm-form-control custom directive which will subscribe for 2 notifications: "data-sent" and "data-processed". Then custom code is responsible for pushing second notification or resolve a promise.
用cm-form-control自定义指令标记所有元素，该指令将订阅两个通知:“数据发送”和“数据处理”。然后自定义代码负责推送第二次通知或解决一个承诺。
Use promiseTracker that (unfortunatelly!) enforces to produce extremely stupid code like ng-show="loadingTracker.active()". Obviously not all elements have ng-disabled and I don't want to user ng-hide/show to avoid "dancing" buttons.
使用promiseTracker(不幸的是!)生成极其愚蠢的代码，比如ng-show=“loadingTracker.active()”。显然，并不是所有元素都禁用了ng，我不想使用ng-hide/show来避免“跳舞”按钮。
Bite a bullet and still use JQuery
咬紧牙关，仍然使用JQuery

Does any one have a better idea? Thanks in advance!

有人有更好的主意吗?提前谢谢!

UPDATED: The fieldset idea DOES work. Here is a simple fiddle for those who still want to do the same http://jsfiddle.net/YoMan78/pnQFQ/13/

更新: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>

and JS:

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);
    };
});

2 个解决方案

#1

263

Wrap all your fields in fieldset and use ngDisabled directive like this:

在fieldset中包装所有字段，并使用ngDisabled指令如下:

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

It will automatically disable all inputs inside the fieldset.

它将自动禁用fieldset中的所有输入。

Then in controller set $scope.isSaving to true before http call and to false after.

然后在控制器中设置$scope。在http调用之前保存为true，之后保存为false。

#2

-5

There is an simple solution in modern browsers:

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

define a css class

定义一个css类

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

add this class to ng-form

将这个类添加到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.

注意:即使您设置了指针事件:none，您仍然可以使用键盘选项卡来输入元素。

#1

263