Angularjs - Sự kiện nhấp của nút Fire2 bằng cách nhấp vào nút1 (nút tải lên giả)

Question

Để thay thế nút tải lên tệp xấu xí bằng nút tải lên giả mạo thời trang, tôi sử dụng jquery như bên dưới.

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

Bây giờ những gì nếu tôi muốn làm điều tương tự trong Angularjs, mà không phụ thuộc thư viện jquery.

Answer 1

Nó là loại khắc phục, và tôi đã kiểm tra nó chỉ trong chrome nhưng cố gắng này:

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

sự kiện Click trên button được đánh bắt như một nhấp chuột vào label và hậu quả là input cũng được "nhấp"!

UPDATE: Nhưng nếu bạn muốn có một thực sự "Angulary" giải pháp, bạn cần sử dụng chỉ thị, như thế này:

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

dụ làm việc: http://plnkr.co/edit/DVALMH?p=preview