点击Generate Report按钮后文件选择器弹出两次的问题求助

首先，从你贴的代码来看，最可能的原因是按钮同时触发了ng-click和表单的submit事件，导致相关逻辑执行了两次。咱们一步步分析：

核心问题点 #

你的按钮设置了type="submit"，同时绑定了ng-click="submit()"：

<button class="button btn-primary" type="submit" ng-click="submit()">Generate Report</button>

当点击这个按钮时，会发生两件事：

1. AngularJS执行ng-click绑定的submit()函数；
2. 浏览器触发表单的原生submit事件。

如果你的submit()函数里（或者表单的submit事件监听里）包含了触发文件选择窗口的逻辑（比如调用了input[type=file]的click()方法），这两个事件就会各自触发一次，导致窗口弹出两次。

解决方案 #

方案1：修改按钮类型为button

把按钮的type从submit改成button，这样就不会触发表单的原生提交事件，只执行ng-click里的逻辑：

<button class="button btn-primary" type="button" ng-click="submit()">Generate Report</button>

方案2：在submit()函数中阻止默认提交行为

如果必须保留type="submit"，可以在submit()里阻止表单的默认提交动作。记得在ng-click中传入$event对象：

<button class="button btn-primary" type="submit" ng-click="submit($event)">Generate Report</button>

然后在控制器的submit函数中添加阻止逻辑：

$scope.submit = function($event) {
  // 阻止表单默认提交行为
  $event.preventDefault();
  
  // 你的原有生成报告逻辑（包括触发文件选择的代码）
  // ...
}

方案3：检查fileread指令的实现

如果上面两个方法都没用，那可能是你自定义的fileread指令有问题。比如指令里重复绑定了事件，或者错误监听了表单的submit事件。举个错误示例：

// 错误的指令实现（重复绑定事件）
angular.module('yourApp').directive('fileread', function() {
  return {
    link: function(scope, element) {
      // 重复绑定click事件，导致两次触发
      element.on('click', function() {
        element[0].click(); // 触发文件选择
      });
      element.on('click', function() {
        element[0].click(); // 又一次触发
      });
    }
  };
});

这时需要检查指令代码，确保只绑定一次正确的事件，避免重复触发。

方案4：排查表单的其他提交监听

还有一种可能是页面中其他代码（比如jQuery）给表单添加了额外的submit事件监听，和Angular的逻辑重复了。可以检查有没有类似这样的代码：

$('#form-ui').submit(function() {
  // 这里也触发了文件选择逻辑
});

如果有，需要移除重复的逻辑。

总结 #

最常见的情况就是按钮的submit类型和ng-click同时触发了两次逻辑，先试试方案1或方案2，一般就能解决问题。如果不行再排查指令和其他事件监听。

内容的提问来源于stack exchange，提问作者ASO