Событие нажатия входного файла триггера в AngularJS

Question

Я пытаюсь эмулировать событие click на входе файла в 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>

Примечание: По некоторым причинам кнопка должна быть нажата два раза для того, чтобы вызвать функцию тайм-аута.

Я использую setTimeout из-за this post.

Как программно щелкнуть ввод файла только с помощью JavaScript AngularJS/vanilla?

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

Answer 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

Таким образом, мы настроены файл ввода тегов, используя этот путь.