javascript - 从 angularjs 函数中触发点击事件会导致错误

Question

我遇到了错误

[$rootScope:inprog] $apply already in progress

每当我在隐藏文件上传输入上触发点击事件时。

HTML:

<!-- button that calls function in controller -->
<button type="button" ng-click="uploadClicked()">Upload</button>
<!-- Upload input I'm triggering the click event on -->
<input type="file" accept="image/*" id="profile-photo" name="profile-photo" ng-hide="true"/>

Controller 中的 AngularJS 函数:

$scope.uploadClicked = function () {
    //Causes Error: [$rootScope:inprog] $apply already in progress and opens file dialog
    document.getElementById('profile-photo').click();

    //Causes Error: [$rootScope:inprog] $apply already in progress and does not open file dialog
    $('#profile-photo').trigger('click');
};

我不会在我的 Controller 中的任何地方调用 $apply 或 $digest。为什么会出现这个错误？

Answer 1

我刚刚遇到了类似的问题，我可以通过用

包裹我们点击的地方来解决这个问题

 setTimeout(function(){uploadClicked();},0);

Angular 版本将是

$timeout(function(){uploadClicked();},0);

通过使用 Angular 版本，Angular 将知道并且不会在发现点击事件时初始化另一个摘要循环。