Angular 1.4：单击后禁用按钮

Question

我遇到一种情况，我想在单击时禁用按钮几秒钟。这是按钮的代码：

<button uib-popover="Create TO" popover-trigger="mouseenter" data-ng-click="createTransportOrder(item.confirmed_price_id)" data-ng-disabled="item.transport_order_id || !item.confirmed_price_id" class="btn btn-info btn-xs">
                            <i class="fa fa-truck"></i>
                        </button>

这是createTransportOrder方法：

$scope.createTransportOrder = function (priceResponseId) {
            var priceResponseIds = [priceResponseId];
            PriceRequestsModel.createTransportOrdersByIds(priceResponseIds).then(
                function (response) {
                    $scope.messages = response.messages;
                    updateSelectedPriceRequests();
                    getPriceRequests();
                },
                function (response) {
                    $scope.messages = response.messages;
                }
            )
        };

我尝试了几件事，但没有成功。我该怎么办？

Answer 1

您可以在setTimeout的末尾添加createTransportOrder

 this.button.nativeElement.disabled = true;
    setTimeout(function(){
      this.button.nativeElement.disabled = false;
    },5000);

将#mybutton添加到按钮<button (click)="yourclick()" #mybutton>Your button</button>

将变量@ViewChild('mybutton') button;添加到您的组件

Stackbliz演示代码：https://stackblitz.com/edit/angular-disable-5second

使用angular 1.4，您可以更改为

将按钮的ID设置为<button id="mybutton">

将这些代码添加到click函数的下面。

document.getElementById('mybutton').disabled = true;
    setTimeout(function(){
      document.getElementById('mybutton').disabled = false;
    },5000);