AngularJS ngRepeat不更新正确显示 [英] AngularJS ngRepeat Not Updating Display Properly

问题描述

我有哪里我使用plupload上传文件，并具有包括NG-重复更新不及时妥善一个奇怪的问题的页面。下面是相关code：

I have have a page where I am using plupload to upload files and having a weird issue with a ng-repeat not updating properly. Here is the relevant code:

<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：

Here is a trimmed down jsfiddle showing the issue happening:

http://jsfiddle.net/9HuUC/

要重现此问题做到以下几点：

To reproduce this issue do the following:

1. 单击在[选择文件]，并选择几个文件（注意，你怎么不看在输出的任何地方显示的文件）


2. 输入任何字符到输入框（奇迹般地您所选择的文件似乎知道）

什么会导致这种类型的行为？我的意思是我知道的数据正确正在$ scope.filesToUpload设置，因为我有执行console.log（）有，甚至检查了它在Batarang它loods良好，但有一些别的原因，需要为显示屏进行更新要更新

What would cause this type of behavior? I mean I know that the data is properly being set in $scope.filesToUpload because I have the console.log() there and even checked it in Batarang and it loods good there but for some reason something else needs to be updated for the display to be updated.

有趣的是，我有工作正常在同一页上的另一个NG-重复。我想知道，如果它有什么用，其中code是（对上传的FilesAdded事件中存在）。

Interestingly enough, I have another ng-repeat that is working fine on the same page. I am wondering if it has anything to do with where the code is (being inside the FilesAdded event on the uploader).

推荐答案

这个问题是由于该FilesAdded回调AngularJS的范围（它是由上传者的称呼）外执行的事实，因此不会范围更新被触发。

The issue is due to the fact that the FilesAdded callback is executed outside the scope of AngularJS (it's called by the uploader), therefore the scope updates won't be triggered.

要解决这个问题，只需添加 $ $范围适用调用回调，封装现有code：

To solve this, just add the $scope.$apply call in the callback, encapsulating your existing code:

$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

With this update, it's working in the fiddle. For reference see the AngularJS official documentation, $apply method of the scope object: http://docs.angularjs.org/api/ng.$rootScope.Scope

这篇关于AngularJS ngRepeat不更新正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！