$apply already in progress when sending a click event to a button?

Question

I have a button on my page with an id="viewQuestions" on a page:

    <body ng-keydown="key($event);">

My code is checking for key hits like this:

    $scope.key = function ($event) {
        $scope.$broadcast('key', $event.keyCode)
    }

and in the controller:

 $scope.$on('key', function (e, key) {
        if (key == 13) {
            if (ts.test.current && ts.test.userTestId) {
                document.getElementById("viewQuestions").click();
            }               
        }
    });

When I run the code and click ENTER then I get this error:

 Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.3.7/$rootScope/inprog?p0=%24apply
    at REGEX_STRING_REGEXP (http://localhost:2757/lib/angular/angular.js:63:12)
    at beginPhase (http://localhost:2757/lib/angular/angular.js:14735:15)
    at Scope.$get.Scope.$apply (http://localhost:2757/lib/angular/angular.js:14479:11)
    at HTMLButtonElement.<anonymous> (http://localhost:2757/lib/angular/angular.js:22945:23)
    at HTMLButtonElement.eventHandler (http://localhost:2757/lib/angular/angular.js:3009:21)
    at http://localhost:2757/app/tests/controllers/TestsController.js:24:62
    at Scope.$get.Scope.$broadcast (http://localhost:2757/lib/angular/angular.js:14700:28)
    at Scope.AppController.$scope.key (http://localhost:2757/app/appController.js:30:20)
    at $parseFunctionCall (http://localhost:2757/lib/angular/angular.js:12330:18)
    at ngEventDirectives.(anonymous function).compile.element.on.callback (http://localhost:2757/lib/angular/angular.js:22940:17)

Can anyone give me advice on this. I just want to simulate the clicking of a button when the ENTER key is pressed. I did try solutions with forms but it does not meet my rather complicated needs.

Try this, and define that function on the angular scope as $scope . functionName = function() {} — mbaljeetsingh, Mar 12 '15 at 13:02
Sorry but what I want to do is to have the user be able to see the button changed to the clicked state and back. Ashad's solution does this but it does not work when the click of the button is initiated by another event like a keypress. — Alan2, Mar 12 '15 at 14:57

score 39 · Answer 1 · answered Mar 14 '15 at 17:09

Your click event is running digest cycle which is conflicting with current digest cycle, $timeout would help you in this situation. Wrap click event inside $timeout function.

Markup

<body ng-app="myApp" ng-controller="testCtrl" ng-keydown="key($event);">
    <button id="viewQuestions" type="button" ng-click="isButtonClicked = !isButtonClicked; test();"> Test</button>
    Is Button Clicked {{isButtonClicked}}
</body>

Code

$scope.$on('key', function (e, key) {
    if (key == 13) {
        if (ts.test.current && ts.test.userTestId) {
            $timeout(function(){
                angular.element(document.getElementById("viewQuestions")).trigger('click');
            })
        }               
    }
});

Whatever you write inside ng-click will get called.

Working Fiddle

`$timeout` for zero milliseconds worked like a charm. Thanks! — Kon, Aug 12 '16 at 18:55

$apply already in progress when sending a click event to a button?

1 Answers1