Angular, disable a button and then activate it using setTimeout in javascript?

Question

I want to disable my button but then activate it a few seconds later. The code does run but the button is still disabled even after my code has executed.

app.controller('spamController', ['$scope', function($scope) {


$scope.stopSpam = false;
  
function activateBtn(){
  $scope.stopSpam = false;
};


$scope.test = function(){
  
  $scope.stopSpam = true;
  activateBtn();

};

}]);

<button ng-disabled="stopSpam" class="btn btn-default" ng-click="test()">Test</button>

tymeJV · Accepted Answer · 2015-09-14 15:22:25Z

3

Use $timeout and call activateBtn after a few seconds:

app.controller('spamController', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.stopSpam = false;

    function activateBtn(){
        $scope.stopSpam = false;
    };


    $scope.test = function(){
        $scope.stopSpam = true;
        $timeout(activateBtn, 3000);
    };
}]);

answered Sep 14, 2015 at 15:22

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

75Kane Over a year ago

if I used plain javascript timeout instead of the $timeout why would it not work?

tymeJV Over a year ago

Because setTimeout doesnt trigger a $digest cycle - which is what updates the view.

lintmouse Over a year ago

Can call $scope.$apply() in setTimeout.

tymeJV Over a year ago

@dustmouse -- You can, but it's considered bad practice.

Collectives™ on Stack Overflow

Angular, disable a button and then activate it using setTimeout in javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related