Question

我想在我的案例中选择一个元素，在我的angularcontroller页面上的一个按钮，然后禁用它。按钮看起来像这样：

myBtn= $element.by.buttonText('submit')

我不希望用户点击按钮两次，以避免在后端发布请求。当我得到上面的代码时，我得到一个角度参考订单。选择按钮然后将disabled属性设置为true的简单方法是什么，这样用户就无法单击该按钮两次？

Answer 1

您可以使用ng-disabled根据提交功能中设置的标志禁用您的按钮。例如：

<form ng-submit="submit()">
  ...
  <button type="submit" ng-disabled="isSubmitting">Submit</button>
</form>

并在您的控制器中：

$scope.submit = function() {
   $scope.isSubmitting = true;
   $http.post('...').finally(function() {
     $scope.isSubmitting = false;
   });
};

Answer 2

如果页面上有很多按钮，那么最好创建一个指令，以便在任何可点击的按钮上，它不会被按下两次

app.directive('ngClickDisable', function() {
  return {
    scope: {
      clickAndDisable: '&'
    },
    link: function(scope, iElement, iAttrs) {
      iElement.bind('click', function() {
        iElement.prop('disabled',true);
        scope.clickAndDisable().finally(function() {
          iElement.prop('disabled',false);
        })
      });
    }
  };
});

这可以在按钮上使用，如下所示：

<button ng-click-disable="functionThatReturnsPromise()">Click me</button>

如何防止双击具有angularjs的按钮？

2 个答案: