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

我试图显示用户使用输入[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>

{{name}}


印刷品

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

app=angular.module（'myApp'）；
app.controller（'UploadFilesCtrl'，['$scope'，函数（$scope）{
$scope.uploadFiles=函数（元素）{
var files=element.files；
var文件名=[]；
对于（i=0；i使用
$scope.$apply（）
更新
$scope
对象

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

休息很好

编辑：

RGraham是正确的。这不是一个完整的验证解决方案。您应该改用指令。但仅为了解决问题，您可以检查
摘要
是否正在进行，如下所示：

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

更新的fiddle：
您不需要$scope。$apply（）

徖

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

但你们只错过了一件事，但这是最重要的

我想你可能犯了以下错误

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

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

app=angular.module（'myApp'，[]）；

而不是

app=angular.module（'myApp'）；

在主模型
（'myApp'，[]）；

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

更新：
请看这个，现在当您单击“打印”按钮时，您选择的文件名会显示出来。
angular.element（this.scope（）.uploadFiles（this）
我想这不会导致角度摘要。这看起来像是一个
指令的作业，但同时您可以尝试
$scope.$apply（函数（）{$scope.files=files；}）；
要查看这是否是一个摘要问题，我刚刚找到了您从中获得此代码段的答案。在假设接受的答案正确之前，您应该：）你有任何错误吗？
$scope.apply
由于某种原因无法完成此工作。我最终尝试创建一个指令。谢谢！这在Crome和IE中可以正常工作，但在Firefox中的Firefox中不起作用。它会产生类似TypeError的错误：angular.element（…）.scope（…）.uploadFiles不是一个功能，这不是一个很好的解决方案。它可以用于调试，但OP应该切换到使用一个不需要
$scope.$apply
的指令。如果摘要已经在进行中，您的代码将导致错误。为什么不投票？我已经更新了我的答案@pankajparkar@ameshrajendran我没有否决这个，但是你的答案不正确？你理解错了，我认为OP已经做到了。@RameshRajendran.-1，你的第一行不是OP问题的答案。第一行不是OP，那是为@Sourabh-answer@RameshRajendran.你可以在评论中这样做。无论如何，删除了否决票。：）