angularjs - 当作用域对象在 Controller 作用域内部更改值时更新 UI

Question

我正在编写一个简单的小文件 uploader ，我将输入文件放入 $scope.files 并通过 ajax 调用上传，然后成功后我将移动 $scope.files 到 $scope.successfulUploads 对象。我想在设置了值后立即显示 successfulUploads 列表，它与 $scope.files 对象配合使用，并且控制台显示 $scope.successfulUploads 应该是这样。如果你愿意的话，我只需要写一个可观察的。

这是我的代码:

Controller

$scope.files = [];
$scope.successfulUploads = [];

$rootScope.$on('upload:success', function() {
    //console.log('Controller: on `success`');
    for (var i = 0; i < $scope.files.length; i++) {
        $scope.successfulUploads.push($scope.files[i]);
    }
    $scope.files = [];
    console.log('successfulUploads: ' + $scope.successfulUploads);
});

HTML:

<span class="span2 btn btn-success fileinput-button">
    <span>Add Files</span>
    <input type="file" multiple ng-model="files" file-change>
</span>
<table class="table table-hover table-striped">
    <tbody>
        <tr ng-repeat="file in successfulUploads">
            <td>{{file.name}}</td>
            <!--<td><a href="#" class="btn btn-danger">Delete</a></td>-->
        </tr>
    </tbody>
</table>
<div class="muted text-left">Uploaded: {{ successfulUploads.length }}</div>
</div>

<小时/>

正如我所说，当我使用 ng-repeat="file in files" 时，它工作得非常漂亮。

在有人建议使用 blueimps 之前文件 uploader ，是的，它是一个外观漂亮、功能强大的文件 uploader ，但我需要它与我已经定义的 Angular 模块一起使用，当我尝试将其转换为它时，它停止工作。今天，我下载了完整的源代码并在我的本地主机上“按原样”运行它，它给了我同样的错误，而且我已经到了最后期限。也许稍后我可以重新访问它。

Answer 1

就在第二个之后:

$scope.files = [];

添加:

$scope.$apply()

然后它应该可以工作。