AngularJS:禁用提交和服务器响应之间的所有表单控件
AngularJS:禁用提交和服务器响应之间的所有表单控件
提问于 2014-02-08 05:28:48
如果我想在用户单击某种“保存”或“提交”按钮时禁用表单控件(或者至少使它们不可用于用户交互)，并且数据通过网络传输，那么什么是最好(也是正确的)方法让我左右为难。我不想使用JQuery (它太邪恶了！)并以数组形式查询所有元素(通过类或属性标记)到目前为止，我的想法是：
- 使用
cm-form-control自定义指令标记所有元素，该指令将订阅两个通知：“数据已发送”和“数据已处理”。然后，自定义代码负责推送第二个通知或解析承诺。 - 使用
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);
};
});回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-08 05:57:54
将所有字段包装在字段集中，并使用ngDisabled指令，如下所示：
<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>它将自动禁用字段集中的所有输入。
然后在控制器中，在http调用之前将$scope.isSaving设置为true，并在调用之后将其设置为false。
Stack Overflow用户
发布于 2017-05-12 18:51:05
在现代浏览器中有一个简单的解决方案：
- 定义css类
.disabled { pointer-events: none；... ... }
- 将此类添加到
ng-form
..。输入...
pointer-events的支持图表是。
注意:即使您设置了pointer-events: none，您仍然可以使用键盘Tab键输入元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21638079
复制相关文章
相似问题