以编程方式调用输入类型文件的click方法时获取$ rootScope:inprog错误

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

在任何时间点的角度中,只能有一个$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>