使用AngularJS和输入[type=file]显示文件列表

Question

我正在尝试显示用户使用输入[type=file]选择的文件列表。

HTML

<div ng-app="myApp">
<div ng-controller="UploadFilesCtrl">
<input type="file" onchange="angular.element(this).scope().uploadFiles(this)" multiple />
<ul>
<li ng-repeat="name in filenames">
{{name}}
</li>
</ul>
<button ng-click="test()">PRINT</button>
</div>
</div>

JS

app = angular.module('myApp');
app.controller('UploadFilesCtrl', ['$scope', function($scope){
$scope.uploadFiles = function(element){
var files = element.files;
var filenames=[];
for (i=0; i<files.length; i++){
filenames.push(files[i].name);
}

$scope.files = files;
$scope.filenames = filenames;   
console.log(files, filenames);
};

$scope.test = function(){
console.log($scope.files, $scope.filenames);
}
}]);

出于某种原因，该列表从未更新。

$scope中的filenames和files变量从未在uploadFiles函数之外更新(当我在选择文件后单击PRINT按钮时，我会得到未定义的)。

有什么想法吗？

谢谢！

Answer 1

您不需要$scope$apply()

你的代码看起来很不错。如果你做了我下面的事情，它应该会起作用。

但你只错过了一件事。但这才是最重要的。

我想你可能会得到以下错误

未捕获错误：[$injector:modulerr]无法实例化模块myApp，原因是：错误：[$injector:nomod]模块"myApp"不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

请在浏览器控制台窗口中验证，如果您出现此错误，请尝试此

app = angular.module('myApp',[]);

而不是

app = angular.module('myApp');

您错过了主模型('myApp',[]);中的空子模型

所有其他代码看起来都很好。

更新：

请看这个小提琴手演示，现在当你点击打印按钮时，你选择的文件名就会显示出来。

Answer 2

使用$scope.$apply()更新$scope对象

...
$scope.files = files;
$scope.filenames = filenames;   
$scope.$apply();
console.log(files, filenames);
...

休息很好。

编辑：

RGraham是正确的。这不是一个完全可靠的解决方案。您应该使用指令。但为了解决这个问题，你可以检查digest是否正在这样进行：

if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
$scope.$apply();
}

更新的fiddle：http://jsfiddle.net/Sourabh_/HB7LU/13086/