Angularjs - Fai clic sul pulsante button2 per attivare l'evento click button (pulsante caricamento falso)

Question

Per sostituire il brutto pulsante di caricamento del file con un elegante pulsante di caricamento falso, utilizzo jquery come indicato di seguito.

HTML

<input type='file' name='file' class='file_upload_btn' style='display:none'> 
<button class='fake_upload_btn'>Upload Files</button> 

jQuery

$('.fake_upload_btn').click(function() { 
    $('.file_upload_btn').click(); 
}) 

Ora che cosa se voglio fare lo stesso in Angularjs, senza Jquery biblioteca dipendenza.

Answer 1

E 'sorta di soluzione, e ho controllato solo in Chrome, ma provate questo:

<label for="uploader"> 
    <button class='fake_upload_btn'>Upload Files</button> 
    <input id="uploader" type='file' name='file' class='file_upload_btn' style='display:none' /> 
</label> 

JSFiddle: http://jsfiddle.net/84Xxb/

evento Click on button viene catturato come un clic su label e di conseguenza input è anche "cliccato"!

UPDATE: Ma se si vuole una soluzione realmente "Angulary", è necessario utilizzare le direttive, in questo modo:

app.directive('uploader', function() { 
    return { 
     template: "Upload Files <input type='file' name='file' class='file_upload_btn' style='display:none'>", 
     link: function(scope, element, attrs) { 
     element.bind("click", function(){ 
      element.find("input")[0].click(); 
     }); 
     } 
    } 
}); 

esempio di lavoro: http://plnkr.co/edit/DVALMH?p=preview