Angularjs - Fire button2 click event durch Klicken auf button1 (falsche Upload-Taste)

Question

Um hässliche Datei Upload-Button mit stilvollen falschen Upload-Taste zu ersetzen, verwende ich jquery wie folgt.

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

Was nun, wenn ich das gleiche in AngularJS tun wollen, ohne JQuery Bibliothek Abhängigkeit.

Answer 1

Es ist eine Art von Problem zu umgehen, und ich habe es nur in Chrom überprüft, aber versuchen Sie dies:

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

Click-Ereignis auf button ist wie ein Klick auf label catched und damit input ist auch "angeklickt"!

UPDATE: Aber wenn Sie eine wirklich "im Winkel" Lösung wollen, müssen Sie Richtlinien verwenden, wie folgt aus:

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

Arbeitsbeispiel: http://plnkr.co/edit/DVALMH?p=preview