4

我有一个页面，我正在使用 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/

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

  1. 单击 [选择文件] 并选择一些文件（注意您在输出的任何位置都看不到文件）
  2. 在输入框中键入任何字符（神奇地出现您选择知道的文件）

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

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

4

1 回答 1

8

问题是由于 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官方文档，scope对象 的$apply方法：http: //docs.angularjs.org/api/ng .$rootScope.Scope

于 2012-10-31T17:25:59.237 回答