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

Question

我正在尝试显示用户使用 input[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 按钮时，我得到 undefined）。

有什么想法吗？

谢谢！

Answer 1

你不需要 $scope.$apply()

.................................................. ..................................................... ..................................................... …………

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

但你只错过了一件事。但这是主要的。

我认为您可能会遇到以下错误

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

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

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

而不是

app = angular.module('myApp');

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

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

更新：

请看fiddler Demo，现在点击打印按钮会显示您选择的文件名。

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

更新小提琴：http://jsfiddle.net/Sourabh_/HB7LU/13086/