从 angularjs 函数中触发点击事件会导致错误
Triggering a click event from within an angularjs function causes an error
我遇到错误
[$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"/>
控制器中的 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
。为什么会出现此错误?
我刚刚遇到了类似的问题,我可以通过用
包裹我们点击的地方来解决这个问题
setTimeout(function(){uploadClicked();},0);
angular 版本为
$timeout(function(){uploadClicked();},0);
通过使用 angular 版本,Angular 将知道并且不会在发现点击事件时初始化另一个摘要周期。
我遇到错误
[$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"/>
控制器中的 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
。为什么会出现此错误?
我刚刚遇到了类似的问题,我可以通过用
包裹我们点击的地方来解决这个问题 setTimeout(function(){uploadClicked();},0);
angular 版本为
$timeout(function(){uploadClicked();},0);
通过使用 angular 版本,Angular 将知道并且不会在发现点击事件时初始化另一个摘要周期。