在AngularJS中触发输入文件点击事件答案

【问题标题】：Trigger input file click event in AngularJS在AngularJS中触发输入文件点击事件
【发布时间】：2015-02-27 10:01:34
【问题描述】：

我正在尝试在 AngularJS 中模拟文件输入的点击事件。我见过working jQuery examples，但我不想用jQuery。

'use strict';

angular.module('MyApp', []).

controller('MyCtrl', function($scope) {
  $scope.click = function() {
    setTimeout(function() {
      var element = angular.element(document.getElementById('input'));
      element.triggerHandler('click');
      $scope.clicked = true;
    }, 0);
  };
});

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
  <input id="input" type="file"/>
  <button ng-click="click()">Click me!</button>
  <div ng-if="clicked">Clicked</div>
</div>

注意：由于某种原因，需要按两次按钮才能触发超时功能。

因为this post，我使用setTimeout。

如何仅使用 AngularJS / vanilla JavaScript 以编程方式单击文件输入？

【问题讨论】：

问题中的代码以及建议的答案是 Angular.js 中众所周知的反模式 - 不要在控制器中进行 DOM 操作，除非它在指令控制器中。

标签： javascript html angularjs

【解决方案1】：

你可以简单地使用

 <button type="button" onclick="document.getElementById('input').click()">Click me!</button>

或

$scope.click = function() {
    setTimeout(function() {
        document.getElementById('input').click()
        $scope.clicked = true;
    }, 0);
};

【讨论】：

您好，有时会打开多次，有什么办法可以防止吗？
我确定@LiadLivnat 已经解决了他的问题，但以防万一有人偶然发现并遇到同样的问题；当您将<input> 放在应该触发输入点击的元素中时，就会发生这种情况。 <div onClick="document.getElementById('input').click()"><input/></div> 将触发对该元素的无限点击。 <input/><div onClick="document.getElementById('input').click()"></div> 工作得很好:)

【解决方案2】：

这里是如何触发“文件”类型的文件或打开选择文件窗口，当你喜欢点击图标、按钮或跨度时；）

css：

.attachImageForCommentsIcon{
  padding-top: 14px;
  padding-right: 6px;
  outline:none;
  cursor:pointer;
}

HTML：

<input id="myInput" type="file" style="visibility:hidden" ng-file-model=""/>
<i onclick="$('#myInput').click();" class="attachImageForCommentsIcon blue-2 right-position material-icons">image</i>

所有学分都用于这个答案： https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box

因此，我们自定义文件输入标签使用这种方式。

【讨论】：

看起来像 jQuery（OP 不想使用 jQuery）。