javascript - Angularjs $rootScope :inprog error when implementing jquery click on input element

Question

我正在显示一个按钮，单击该按钮会定位一个输入元素

 <input type="file" multiple style="display:none" />

一旦找到该元素(使用 jquery)，我就会尝试发出单击。虽然这确实有效(选择文件对话框打开)，但我还在 angularjs 中收到 $rootScope:inprog 错误。

我的实际 HTML 看起来像这样

<div ng-controller="upload as vm">
<button ng-disabled="!vm.selectedUpload" ng-click="vm.addFilesClick()">
     Add Files
</button>

<table>
    <tbody>
      <tr ng-repeat="up in vm.uploadList" ng-click="vm.selectUpload(up)">
          <td>
             <b>{{up.Name}}</b>
          </td>
          <td>
             <input id={{up.Id}} type="file" multiple="multiple" style="display:none" onchange="angular.element(this).scope().$parent.vm.filesChange(this)" />
          </td>
      </tr>
    </tbody>
</table>
</div>

这是 Controller :

(function() {
   'use strict';
   angular.module('upload.app').controller("upload",[upload]);

   function upload() {
      var me = this;
      me.uploadList = [];
      me.selectedUpload = null;
      ...
      me.addFilesClick = function(){
         var _element = $("#" + me.selectedUpload.Id);
         if(_element)
             _element.click();
       }
   }
 )();

为什么我会收到此错误？我可以采取什么措施来纠正它？另外，如果有人知道一种更好的方法来强制单击某个元素，而无需访问我的 Controller 中的元素，那也会很有帮助。

Answer 1

您需要在 Controller 中注入(inject) $timeout 并使用它来调用单击事件，因为 AngularJS 一次只允许一个 $digest 或 $apply 操作。

if(_element) {
    $timeout(function() {
         _element.click();
     }, 1);
}