Question

我在点击时与服务器联系的按钮有问题。如果您进行双击（或任何数量的点击），您将多次呼叫服务器。

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'ADMIN.CONTENT.DELIVERIES.BODY.CLOSE' | translate }}</button>
    <a class="btn btn-danger" ng-click="vm.markDelivered()" ng-dblclick="return" ng-disabled="flag">{{ 'MANAGER.CONTENT.DELIVERIES.BODY.DELETE_PANEL.CONFIRM' | translate }}</a>
</div>

我尝试使用ng-disabled但由于某种原因它不起作用，因为它说不允许那个元素。我尝试将a更改为button，但这似乎是一样的。 ng-dblclick="return"也没有做任何事情。

Answer 1

即使我有同样的问题，并使用这种方法解决了。

<div class="col-sm-4 form-group pull-right">
   <input type="submit" name="Submit" class="btn btn-primary"
    value="Submit" data-ng-disabled="myForm.$invalid"
    ng-click="myForm.$invalid=true;vm.markDelivered()" />
</div>

因此，首次点击myForm.$invalid=true将被设置，按钮将被禁用。因此，您不会多次调用服务器端代码。

Answer 2

因此，使用Bootstrap按钮，您将无法使用ng-disabled。你必须这样做：

<div class="btn btn-default" ng-class="{'disabled': idDisabled}" ng-click="doSomething()">I'm a button!</div>

您在按钮上设置班级disabled。但这并不会禁用动作本身。因此，当按下按钮时，您需要检查isDisabled变量，如果确实如此，则返回并且不执行预期的操作。

例如：

doSomething() {
   if (isDisabled) {
       return
   } else {
       // do your server call
       // when call is finished set isDisabled = false
   }
}

Answer 3

我在这里看到了几个问题。

首先，将锚标记更改为按钮。

其次，您似乎使用'controller as'语法。因此，您可能需要在flag中设置vm。但是，在你的html中，你正在寻找$scope中的旗帜。将ng-disabled="flag"更改为ng-disabled="vm.flag"

您的最终按钮行如下所示： <button class="btn btn-danger" ng-click="vm.markDelivered()" ng-dblclick="return" ng-disabled="vm.flag">{{ 'MANAGER.CONTENT.DELIVERIES.BODY.DELETE_PANEL.CONFIRM' | translate }}</button>

添加working plunker here演示ng-disabled

Answer 4

使用简单的行为指令怎么样？

function oneTimeCallDirective($timeout) {
  var httpCallMock = (cb = () => 'ok') => $timeout(cb, 5000);

  return function oneTimeCallPostLink(iScope, iElement) {
    let busy = false;
    
    return iElement
      .on('click dblclick', function(event) {
        if(busy) {
          return event.preventDefault();
        }
        
        busy = true;
        
        console.info('Well, Calling.');        
        
        return httpCallMock()
          .then(() => {
            console.log('You Can Start Calling Again');
          })
          .finally(() => {
            busy = false;
          })
        ;
      })
    ;
  };
}

angular
  .module('test', [])
  .directive('oneTimeCall', oneTimeCallDirective)
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <button one-time-call>Click Here</button>
</section>

AngularJS禁用双击

4 个答案: