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

1）单击带有onLlick UploadPdf

的按钮

2）您触发按钮内部的点击（在其子元素上）

3）点击事件会回弹到按钮

4）转到第1点：）

解决方案可以

ng-click="$event.stopPropagation();"

应用于输入元素

Answer 2

您可以检查点击的元素，以及是否输入 - 什么都不做

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

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

2 个答案: