Triggering click event from angularjs function throws error
I am getting the error
[$ rootScope: inprog] $ are already being applied in the process
whenever i fire a click event to enter a hidden file.
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 function in controller:
$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');
};
I am not calling $apply
or $digest
anywhere on my controller. Why is this error occurring?
+3
source to share
1 answer
I got a similar problem and was able to fix it by wrapping the place where we click
setTimeout(function(){uploadClicked();},0);
angular version will be
$timeout(function(){uploadClicked();},0);
Using angular vesrion it will know and not initialize another digest loop when it detects a click event.
+2
source to share