AngularJS 지시문의 링크에 숨겨진 입력 파일 포함

Question

이것이 작동하지 않는 이유를 이해하려고 노력 중입니다. 부트 스트랩 드롭 다운에 링크를 표시해야하는데이 링크는 파일 선택자를 트리거합니다. 파일을 선택하면 파일을 내 서버에 업로드합니다.

업로드 링크를 묶는 지시문을 만들었습니다.이 지시문은 입력 파일의 레이블과 숨겨진 입력 파일 자체를 포함합니다. 레이블을 클릭하면 파일 선택기가 표시됩니다. 좋구나. 하지만 내 지시문을 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/

편집 할 수 있습니다. 당신은 코드 또는 5의 빠른 추가 라인이 주위에 얻을 수 있습니다 :

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

JsFiddle :주의 깊게 보면 http://jsfiddle.net/2gzczhgk/5/