AngularJS ng 重复未正确更新显示

Question

我有一个页面，我在其中使用 plupload 上传文件，但遇到了一个奇怪的问题，即 ng-repeat 没有正确更新。这是相关的代码:

<div ng:app>
  <div name="myForm" ng-controller="Ctrl">
    <input ng-model="test" type="text" />{{test}}<div id="container" class="controls">
    <div id="filelist">
      <div ng-repeat="file in filesToUpload">{{file.name}} ({{file.size}}) <b>{{file.percent}}</b></div>
      </div>
      <br />
      <a id="pickfiles" href="#">[Select files]</a>
    </div>
  </div>
</div>​

function Ctrl($scope) {
    $scope.test = '';$scope.filesToUpload = [{id: 1, name: 'test', size: '123kb'}];

    $scope.addItem = function(object) {
        $scope.filesToUpload.push(object);
    }

    $scope.uploader = new plupload.Uploader({
        runtimes : 'html5,flash,browserplus,gears',
        browse_button : 'pickfiles',
        container : 'container',
        max_file_size : '10mb',
        url : 'upload.php',
        flash_swf_url : '/plupload/js/plupload.flash.swf'
    });

    $scope.uploader.init();

    $scope.uploader.bind('FilesAdded', function(up, files) {
        $scope.filesToUpload = [];
        $.each(files, function(i, file) {
            $scope.addItem({
                id: file.id,
                name: file.name,
                size: plupload.formatSize(file.size)
            });
        });

        console.log($scope.filesToUpload);

        up.refresh(); // Reposition Flash/Silverlight
    });
}​

这是一个精简的 jsfiddle，显示了发生的问题:

http://jsfiddle.net/9HuUC/

要重现此问题，请执行以下操作:

单击 [选择文件] 并选择几个文件(请注意，您在输出的任何位置都看不到文件)

在输入框中输入任何字符(神奇的是，您选择的文件会出现)

什么会导致这种行为？我的意思是我知道在 $scope.filesToUpload 中正确设置了数据，因为我在那里有 console.log() 甚至在 Batarang 中检查了它，它在那里看起来不错，但由于某种原因需要为显示更新其他内容要被更新。

有趣的是，我还有另一个 ng-repeat 在同一页面上运行良好。我想知道它是否与代码所在的位置(在上传器的 FilesAdded 事件中)有关。

Answer 1

问题是由于 FilesAdded 回调在 AngularJS 的范围之外执行(由上传者调用)，因此不会触发范围更新。

要解决这个问题，只需添加 $scope.$apply调用回调，封装您现有的代码:

$scope.uploader.bind('FilesAdded', function(up, files) {
    $scope.$apply( function() {
        $scope.filesToUpload = [];
        $.each(files, function(i, file) {
            $scope.addItem({
                id: file.id,
                name: file.name,
                size: plupload.formatSize(file.size)
            });
        });

        console.log($scope.filesToUpload);

        up.refresh(); // Reposition Flash/Silverlight
    });
});

通过此更新，它可以正常工作。引用 AngularJS 官方文档， $申请 的方法范围目的:
http://docs.angularjs.org/api/ng .$rootScope.Scope