ファイル入力でng-modelが動作しません

Question

ファイル入力の値を取得して、入力の外側のどこかに表示しようとしています。私はアプリでAngularJS v1.4.8を使用しています。

<input type="file" ng-model="fileName" /> 
<div>{{fileName}}</div> 

このアプローチは、type = "text"では有効ですが、type = "file"ではうまく機能しません。

どうしてこの問題を解決できますか？

ありがとうございました！

Answer 1

私の仕事はかなり簡単だったので、私は別の道を行くことにしました：

HTML：

<input type="file" file-input="files" /> 
<ul> 
    <li ng-repeat="file in files">{{file.name}}</li> 
</ul> 

JS：

.directive('fileInput', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      element.bind('change', function() { 
       $parse(attributes.fileInput) 
       .assign(scope,element[0].files) 
       scope.$apply() 
      }); 
     } 
    }; 
}]); 

をこれは実際thisチュートリアルからソリューションです。これは複数のファイルでも機能することに注意してください。

しかし、Serghinhoの選択肢には何も悪いことはありませんが、ほんの簡単な方法があります。