javascript - 以编程方式触发事件进入 $timeout 导致无限循环

Question

我有一个看起来像这样的模板(模板中有很多这样的实例):

<span>
  <button type="button" ng-click="uploadPdf($event)">
    <i class="fa fa-file"></i>
    <input type="file" class="pdfDoc" ng-show="false">
  </button>
</span>

想法是当用户点击按钮时，应该触发(点击)input[type="file"]。

我先试着把它弄成这样:

$scope.uploadPdf = function(e) {
  e.currentTarget.lastElementChild.click();
};

它有效，但控制台对我大喊 $apply 仍在进行中，所以我找到了建议使用 $timeout 的解决方案，所以我将上面的代码包装到 $timeout

$scope.uploadPdf = function(e) {
  $timeout(function() {
    e.currentTarget.lastElementChild.click();
  }, 0, false);
};

出于某种原因，这会无限运行。

有人知道为什么会这样吗？还有其他可能的解决方案吗？

谢谢。

Answer 1

你可以只检查点击了什么元素，如果是输入 - 什么都不做

$scope.uploadPdf = function(e) {
  if(e.target.tagName.toLowerCase() == 'input'){
    return false;
  }
  e.currentTarget.lastElementChild.click();
};