[解決済み】AngularJs：ファイル入力フィールドの変更をチェックする方法は？

質問

私はangularの初心者です。HTMLの'file'フィールドに'change'が発生したときに、アップロードされたファイルのパスを読み取ろうとしています。onChange」を使用すると動作しますが、「ng-change」を使用してそれをアンギュラー方法で使用すると動作しません。

<script>
   var DemoModule = angular.module("Demo",[]);
   DemoModule .controller("form-cntlr",function($scope){
   $scope.selectFile = function()
   {
        $("#file").click();
   }
   $scope.fileNameChaged = function()
   {
        alert("select file");
   }
});
</script>

<div ng-controller="form-cntlr">
    <form>
         <button ng-click="selectFile()">Upload Your File</button>
         <input type="file" style="display:none" 
                          id="file" name='file' ng-Change="fileNameChaged()"/>
    </form>  
</div>

fileNameChaged() が呼び出されることはありません。Firebugでもエラーは表示されません。

解決方法は？

File Upload コントロールのバインディングがサポートされていない

https://github.com/angular/angular.js/issues/1375

<div ng-controller="form-cntlr">
        <form>
             <button ng-click="selectFile()">Upload Your File</button>
             <input type="file" style="display:none" 
                id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
        </form>  
    </div>

ではなく

 <input type="file" style="display:none" 
    id="file" name='file' ng-Change="fileNameChanged()" />

を試してみてください。

<input type="file" style="display:none" 
    id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />

注意：この場合、angularアプリケーションは常に デバッグモード . デバッグモードが無効になっている場合、実運用コードでは動作しません。

を変更し、関数内で の代わりに

$scope.fileNameChanged = function() {
   alert("select file");
}

を試してみてください。

$scope.fileNameChanged = function() {
  console.log("select file");
}

以下は、ドラッグドロップによるファイルアップロードの動作例です。 http://jsfiddle.net/danielzen/utp7j/

Angular ファイルアップロード情報

ASP.NetでAngularJSのファイルアップロードを行うためのURL

https://github.com/geersch/AngularJSFileUpload

NodeJSでプログレス付きAngularJsネイティブマルチファイルアップロード

http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/

ngUpload - iframeを使用してファイルをアップロードするためのAngularJSサービス

http://ngmodules.org/modules/ngUpload