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()
            });
        }
    };
}]);

这实际上是本教程的解决方案.请注意,这也适用于多个文件.

然而,对于Serghinho的替代方案来说,没有什么不好的,我认为只有一种更简单的方法.