AngularJS ngRepeat Не обновляйте дисплей надлежащим образом

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/

Чтобы воспроизвести эту проблему, выполните следующие действия:

1. Нажмите на [ выберите файлы] и выберите несколько файлов (обратите внимание, как вы не видите файлы, отображаемые в любом месте на выходе)
2. Введите любой символ в поле ввода (возможно, будут найдены файлы, которые вы выберете)

Что может вызвать такой тип поведения? Я имею в виду, что я знаю, что данные правильно устанавливаются в $ 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