javascript - 获取 $rootScope :inprog error when calling click method of input type file programmatically

Question

我想创建自定义文件上传组件。我在 html 中做了以下代码

HTML 代码

<input id="upload" type="file" style="display: none;">// don`t want to render default
<button class="parimarybtnVD" type="button" ng-click="clickUpload()">Browse</button>

JS 代码

$scope.clickUpload = function() {
    angular.element('#upload').trigger('click');
};

但是当我点击“按钮”时出现以下错误。

           Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.16/$rootScope/inprog?p0=%24apply
at Error (<anonymous>)
at http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:6:450
at l (http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:102:171)
at h.$digest (http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:105:497)
at HTMLDocument.D (http://localhost:7001/RightsWeb/scripts/utill/ui-bootstrap-tpls-0.11.0.min.js:9:14775)
at HTMLDocument.f.event.dispatch (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:4351)
at HTMLDocument.h.handle.i (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:328)
at Object.f.event.trigger (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:3038)
at <error: TypeError: Accessing selectionDirection on an input element that cannot have a selection.>
at Function.e.extend.each (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:2:11937) 

谁能告诉我为什么会出现此错误？如果有更好的方法在 angularjs 中进行自定义文件上传，请告知。提前致谢。

Answer 1

在 Angular 中，任何时间点都只能有一个 $digest 或 $apply 操作在进行中。

使用$timeout。

$scope.clickUpload = function() {
    $timeout(function() {
        angular.element('#upload').trigger('click');
    }, 1);
};

或者，我建议你使用

<button 
    class="parimarybtnVD" 
    type="button" 
    onclick="document.getElementById('upload').click()">Browse</button>