triggerHandler 导致错误：[$rootScope:inprog] $apply already in progress 错误 - AngularJS答案

【问题标题】：triggerHandler causing Error: [$rootScope:inprog] $apply already in progress error - AngularJStriggerHandler 导致错误：[$rootScope:inprog] $apply already in progress 错误 - AngularJS
【发布时间】：2015-10-15 12:58:35
【问题描述】：

我试图在按下某个键时触发单击按钮。我正在使用triggerHandler 函数执行此操作，但这会导致上述错误。我想我一定是创建了某种循环引用/循环，但我看不到在哪里。

这是我的 HTML：

<button id="demoBtn1" hot-key-button hot-key="hotKeys.primaryTest" class="po-btn primary-btn" type="submit" ng-click="btnFunction()"></button>

这是我的控制器：

.controller('BtnCtrl', function ($scope) {
    $scope.checkKeyPress = function ($event, hotKeyObj) {
        for(var key in hotKeyObj) {
            if($event.keyCode == hotKeyObj[key].keyCode) {
                var id = hotKeyObj[key].btnId;
                hotKeyObj[key].funcTriggered(id);
            }
        }
    }
    $scope.clickFunction = function(id) {
        var currentButton = angular.element(document.getElementById(id));
        currentButton.triggerHandler("click");
    }
    $scope.btnFunction = function() {
        console.log("clickFunction1 has been triggered");
    }

    $scope.hotKeys = {
        'primaryTest': {
            keyCode: 49,
            keyShortcut: "1",
            label: "Button",
            btnId: 'demoBtn1',
            funcTriggered: $scope.clickFunction
        },
        // more objects here
        }
    }
})

我的指令在这里：

.directive("hotKeyButton", function() {
    return {
        controller: 'BtnCtrl',
        scope: {
            hotKey: '='
        },
        transclude: true,
        template: "<div class='key-shortcut'>{{hotKey.keyShortcut}}</div><div class='hotkey-label'>{{hotKey.label}}</div>"
    };
})

这是一项正在进行的工作，所以我怀疑某些地方可能存在小错误，但我主要对从按键运行到 btnFunction 被触发的逻辑感兴趣。错误在currentButton.triggerHandler("click") 行上触发。

谁能看到我做了什么？谢谢。

【问题讨论】：

标签： angularjs onclick jquery-triggerhandler

【解决方案1】：

由于您在处理 $apply 时遇到问题 - 您可以将您的 triggerHandler 调用包装到 $timeout 包装器中 - 只是为了在另一个 $digest-cycle 中制作您需要的一切，如下所示：

$scope.clickFunction = function(id) {
    var currentButton = angular.element(document.getElementById(id));
    $timeout(function () {
      currentButton.triggerHandler("click");
    });
}

在此之后一切都会正常。

也不要忘记将$inject $timeout 服务到您的BtnCtrl。
另外我不确定您是否需要为指令定义 controller 属性，但这不是主要情况。

演示：http://plnkr.co/edit/vO8MKAQ4397uqqcAFN1D?p=preview

【讨论】：