javascript 向按钮发送点击事件时,$apply 已经在进行中?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29008322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 09:57:12  来源:igfitidea点击:

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

javascriptangularjseventsangularjs-digest

提问by Alan2

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

我的页面上有一个按钮,页面上有一个 id="viewQuestions":

    <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:

当我运行代码并单击 ENTER 时,我收到此错误:

 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.

谁能给我这方面的建议。我只想模拟按下 ENTER 键时单击按钮。我确实尝试过使用表单的解决方案,但它不能满足我相当复杂的需求。

回答by Pankaj Parkar

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

您的点击事件正在运行与当前摘要周期冲突的摘要周期,$timeout在这种情况下会对您有所帮助。将单击事件包装在$timeout函数内。

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-clickwill get called.

你在里面写的任何东西ng-click都会被调用。

Working Fiddle

工作小提琴