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>

这是控制器：

(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();
       }
   }
 )();

为什么我收到此错误，我该怎么做才能纠正错误？此外，如果有人知道能够强制点击元素而不必访问控制器中的元素的更好方法，那么这也会有所帮助。

Answer 1

你需要在控制器中注入$ timeout并使用它来调用click事件，因为AngularJS一次只允许一个$ digest或$ apply操作。

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

Angularjs $ rootScope：实现jquery点击输入元素时的inprog错误

1 个答案: