将隐藏的输入文件包含在AngularJS指令的链接中

Question

我试图理解为什么这不起作用，而且我被困住了。我需要在Bootstrap下拉列表中显示一个链接，此链接将触发文件选择器。在选择文件时，我会将文件上传到我的服务器。

所以我创建了一个包含上传链接的指令：该指令包含输入文件的标签和隐藏的输入文件本身。当我单击标签时，应该显示文件选择器。好的。但是当我将我的指令包含在a标签中时，这种行为并没有发生......这正是我打算做的。

这是展示这种行为的小提琴：http://jsfiddle.net/pabuisson/2gzczhgk/4/

如果有人对链接标签内部失败的原因有任何疑问，或者我如何解决这个问题，我很高兴听到这个消息。我对AngularJS-Bootstrap混音很陌生，所以我可能错过了一些明显的东西。

非常感谢你的帮助！

Answer 1

即使没有棱角分明，这在html中也不起作用。作为测试，我创建了一个页面，其中只包含一个链接和一个输入，如下所示：

<a>CLICK ME TO PICK A FILE<input type='file'/></a>

它并不像你想要的那样发挥作用。

Jsfiddle ：http://jsfiddle.net/1cbzbhp3/

修改 所以看起来用于打开/关闭下拉列表的javascript是在文件打开对话框事件触发之前触发关闭事件。您可以通过快速额外的代码或5：

来解决这个问题

    link: function(scope, element){
        element.bind("click", function(event){
           event.stopPropagation(); 
        });
    }

JsFiddle ：http://jsfiddle.net/2gzczhgk/5/