Angularjs - 通过单击button1(假上传按钮)触发按钮2的单击事件

Question

要用时尚的假上传按钮替换丑陋的文件上传按钮,我使用如下的jquery.

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

现在如果我想在Angularjs中做同样的事情,没有Jquery库依赖.

Answer 1

这是一种解决方法,我只在chrome中检查它,但试试这个:

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

点击事件button就像点击一样被捕获label,因此input也被"点击"!

更新:但如果你想要一个真正的"Angulary"解决方案,你需要使用指令,如下所示:

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

工作示例:http://plnkr.co/edit/DVALMH？p = preview