如何使用AngularJS延迟启用按钮？

Question

I am using the ng-disabled directive to control when a button on my page can be clicked. Is it possible to control this via a timer? I would like the button to be disbaled until 5 seconds have elapsed. My HTML is currently:

<div ng-controller="ResetController">
    <button ng-click="reset()">Reset</button>
</div>

Answer 1

You can use $timeout :

$timeout(function() {
   $scope.buttonEnabled = true;
}, 5000);

And in your html:

<button ng-click="reset()" ng-disabled="!buttonEnabled">Reset</button>

Also don't forget to inject $timeout into your controller. Like any other angular Service ( $http for example).

Answer 2

ng-enabled isn't in core, but ng-disabled evaluates based on either true or false so simply use a timeout to assign true to a variable after a desired amount of time to enable accordingly.

html:

<button ng-disabled="isDisabled">click me after 3 seconds</button>

controller:

function($scope, $timeout) {
  $scope.isDisabled= true;
  $timeout(function(){
    $scope.isDisabled= false;
  }, 3000)
}

Answer 3

You need to set a variable in your controller, then set ng-disabled using that variable.

For example, assuming a controller ExampleController registered with controller-as "example":

(function() {
    'use strict';
    angular.module('app').controller('ExampleController',ExampleController);
    ExampleController.$inject = ['$timeout'];

    function ExampleController($timeout) {
        var vm = this;
        vm.buttonDisabled = true;
        $timeout(function() { 
            vm.buttonDisabled = false;
        }, 5000);
    }
})();

Then in your template:

<input type="button" ng-disabled="example.buttonDisabled"/>

Answer 4

you need to use timeout as per the previous answer ...

$scope.buttonDisabled = true;

$timeout(function() {
   $scope.buttonDisabled = false;
}, 5000);

don't forget to inject $timeout into your controller / service.

then in your HTML do ...

<div ng-controller="ResetController">
    <button ng-click="reset()" ng-disabled="buttonDisabled">Reset</button>
</div>

Answer 5

Try this:

var interval= setInterval(timePassed, 1000);
function timePassed() {
   $scope.buttonEnabled = true;
}

and:

<input type="button" ng-enabled="buttonEnabled"/>