トリガー<input type = "file">プログラムで角度を指定してファイルを選択

Question

このJSFiddleに示すようにngImgCropを使用しています。
私は何を達成しようとすると、私は（NG-IFを使用して）表示したときに画像選択ボックスが自動的に開きますということです。

<div ng-if="showImageSelector"> 
<div>Select an image file: <input type="file" id="fileInput" /></div> 
<div class="cropArea"> 
    <img-crop image="myImage" result-image="myCroppedImage"></img-crop> 
</div> 
</div> 

です：私はプログラム的にも見せず、画像選択ウィンドウを開きたいですユーザー：

<input type="file" id="fileInput" /> 

iv'eは、コントローラの入力のクリックイベントのいくつかのバリエーションに入れ、それらのどれもこれまでに試したiv'e、働いていないしようとした： 1.

$timeout(function() { 
    angular.element('#fileInput').triggerHandler('click'); 
    }, 0); 

トリガの

2.

angular.element(document).ready(function() { 
    angular.element('#fileInput').triggerHandler('click'); 
    }); 

3.

setTimeout(function(){ 
    angular.element('#fileInput').triggerHandler('click'); 
    }, 1000); 

4.

setTimeout(function(){ 
    document.getElementById('fileInput').click(); 
    }, 1000); 

Answer 1

はそれで、私の指示でngImgCropを包むことになりました。別に 私は私のindex.htmlでこれを置いiv'e、IMGセレクタのために示した実際の要素：

<div ng-show="false"> 
    <my-image-select cropped-image="groupDetails.newPic" return-func="groupDetails.imageSelectFinish"></my-image-select> 
</div> 

、それが動作します。 index.htmlで余分な目に見えないmy-image-selectを使用しないと、ファイルチューザーは2回目の試みから自動的に開きます。

Answer 2

ファイルセレクタオープンプログラムで、答えはイエスです。

ただし、このイベントがユーザーによって行われたことを確認する必要があります。

たとえば、そこにボタンがあり、その上にクリックイベントを添付します。 ユーザーがこのボタンをクリックすると、、イベントハンドラ内で、JavaScriptコード（document.getElementById('fileInput').click()）でトリガできます。これはうまくいくはずです。

しかし、ファイルセレクタを開くために複数行のJavaScriptコードを実行したい場合は、ユーザのクリックなしでをクリックします。これはセキュリティポリシーに違反するため不可能です。

だから私added some code to your sample、

HTML、

<button ng-click='open()'>Open selector</button> 

はJavaScript、これはあなたの問題を解決するだろう

$scope.open = function() { 
    document.getElementById('fileInput').click(); //this work 
}; 

希望。リンク機能で

$timeout(function() { 
     angular.element(document.querySelector('#fileInput')).click(); 
     $log.debug("poped it"); 
    }, 250); 

：その配置iv'e）