如果我想在用户单击“保存”或“提交”按钮之类的一段时间内禁用表单控件(或至少使它们无法与用户交互),则对最好(正确)的方法有什么困惑?和数据通过网络传输。我不想使用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); }; });
将所有字段包装在 fieldset中, 并使用 ngDisabled 指令,如下所示:
<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>
它将自动禁用字段集中的所有输入。
然后在控制器中将其设置$scope.isSaving为truehttp调用之前和false之后。
$scope.isSaving
true
false