File di input trigger evento click in AngularJS

Question

Sto tentando di emulare un evento click su un file input in AngularJS. Ho visto working jQuery examples, ma non voglio usare 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>

Nota: Per qualche motivo il tasto deve essere premuto due volte per attivare la funzione di timeout.

Sto usando setTimeout a causa di this post.

Come faccio a fare clic a livello di codice su un file con solo AngularJS/vanilla JavaScript?

Answer 1

Si può semplicemente utilizzare

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

O

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

Answer 2

Ecco come file di trigger di tipo 'file' o finestra di selezione dei file aperti quando click sull'icona, pulsante o span come ti piace;)

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> 

tutti i crediti va per questa risposta: https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box

Così, abbiamo personalizzato le tag input file utilizzando in questo modo.