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

Question

我遇到了一个错误：

[$rootScope:inprog] $apply已在进行中

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

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"/>

控制器中的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');
};

在我的控制器中没有调用$apply或$digest，为什么会发生这个错误？

- Jack Zach Tibbles

---

因为AngularJS在后台执行某些操作，而您触发的“click”事件与其冲突。 - t.niese

这真是不幸。有什么绕过这个问题的建议吗？ - Jack Zach Tibbles

尝试将其包装在$timeout中。 - Rob J

@justine，你有解决这个问题的好运吗？我遇到了同样的问题。我正在手动点击一个隐藏的链接进行下载，然后就会出现这个错误。请更新。 - Divya MV

Answer 1

我刚遇到一个类似的问题，通过将我们点击的位置包裹起来，我成功地解决了这个问题。

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

Angular的版本将是：

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

通过使用Angular版本，Angular将会意识到并且在发现点击事件时不会初始化另一个digest周期。

- Divya MV

---

应该是setTimeout，而不是setTimeOut（没有大写O）。 - Mathias Conradt

实际上，现在应该是 $timeout(function() { uploadClicked(); })。 - Tom