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

由于某种原因,列表永远不会更新.

在filenames与files变量中$scope从来没有得到过的之外更新uploadFiles功能(当我点击选择文件后,打印按钮,我得到未定义).

有任何想法吗？

谢谢!

Answer 1

用于$scope.$apply()更新您的$scope对象

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

休息工作正常。

编辑：

格雷厄姆是正确的。这不是一个完整的证明解决方案。您应该使用指令代替。但只是为了解决这个问题，您可以检查是否digest正在进行中，如下所示：

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

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