Trigger Eingabedatei klicken Ereignis in AngularJS

Question

Ich versuche, ein Klickereignis auf eine Dateieingabe in AngularJS zu emulieren. Ich habe working jQuery examples gesehen, aber ich möchte jQuery nicht verwenden.

'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>

Hinweis: Aus irgendeinem Grund muss die Taste zweimal gedrückt werden, um die Timeout-Funktion auszulösen.

Ich verwende setTimeout wegen this post.

Wie programmiere ich programmgesteuert eine Dateieingabe mit nur AngularJS/Vanille JavaScript?

Answer 1

Sie können einfach verwenden

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

ODER

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

Answer 2

Hier ist, wie Trigger-Datei vom Typ 'Datei' oder öffnen select-Dateifenster wenn Klick auf das Symbol, Button oder Spannweite, wie Sie möchten;)

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> 

alle Kredite geht für diese Antwort: https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box

So wir Datei-Eingabe-Tag auf diese Weise angepasst.