如果我想在用户单击某种“保存”或“提交”按钮时禁用表单控件(或者至少使它们不可用于用户交互),并且数据通过网络传输,那么什么是最好(也是正确的)方法让我左右为难。我不想使用JQuery (它太邪恶了!)并以数组形式查询所有元素(通过类或属性标记)到目前为止,我的想法是:
cm-form-control
自定义指令标记所有元素,该指令将订阅两个通知:“数据已发送”和“数据已处理”。然后,自定义代码负责推送第二个通知或解析承诺。promiseTracker
(不幸的是!)强制生成极其愚蠢的代码,如ng-show="loadingTracker.active()"
。显然,并不是所有的元素都有ng-disabled
,我不想使用ng-hide/show
来避免“跳舞”按钮。有没有更好的主意?提前感谢!
更新:字段集的想法是可行的。对于那些仍然想做同样的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);
};
});
发布于 2014-02-08 05:57:54
将所有字段包装在字段集中,并使用ngDisabled指令,如下所示:
<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>
它将自动禁用字段集中的所有输入。
然后在控制器中,在http调用之前将$scope.isSaving
设置为true
,并在调用之后将其设置为false
。
发布于 2017-05-12 18:51:05
在现代浏览器中有一个简单的解决方案:
.disabled { pointer-events: none;... ... }
ng-form
..。输入...
pointer-events的支持图表是。
注意:即使您设置了pointer-events: none
,您仍然可以使用键盘Tab键输入元素。
https://stackoverflow.com/questions/21638079
复制相似问题