范围对象在内部将值更改为控制器范围时更新UI

Question

我正在写一个简单的小文件上传器,我将输入文件输入$scope.files并通过ajax调用上传,然后成功我转移$scope.files到$scope.successfulUploads对象.我想在successfulUploads设置值时立即显示内联列表,它与$scope.files对象一起工作,控制台显示$scope.successfulUploads应该如此.如果你愿意,我只需要写一个可观察的.

这是我的代码:

调节器

$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文件上传器之前,是的,它是一个非常漂亮的文件上传器,具有强大的功能,但我需要这个与我已定义的角度模块一起工作,当我试图将它转换为它时它停止工作.今天我下载了完整的源代码并在我的localhost上"按原样"运行它它给了我同样的错误,我在截止日期.也许在以后我可以重温它.

Answer 1

在第二个之后:

$scope.files = [];

加:

$scope.$apply()

然后它应该工作.