AngularJS ngRepeat Not Updateating Display 올바르게

Question

파일을 업로드하고 ng-repeat가 이상하게 업데이트되지 않는 페이지가 제대로 있습니다. 다음을 수행

http://jsfiddle.net/9HuUC/

이 문제를 재현하려면 : 여기

<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됩니다 다음은 관련 코드입니다에

1. 클릭 [ 파일 선택]을 선택하고 몇 개의 파일을 선택하십시오 (출력의 아무 곳에 나 표시된 파일이 보이지 않는 것을보십시오)
2. 임의의 문자를 입력 상자에 입력하십시오 (마술로 선택한 파일이 나타납니다)

이 문제가 발생할 수있는 요인은 무엇입니까? 나는 거기에 console.log()가 있고 심지어 Batarang에서 검사했기 때문에 $ scope.filesToUpload에 데이터가 제대로 설정되어 있음을 알았습니다. 거기에는 좋은 점이 있지만 어떤 이유로 인해 표시를 위해 업데이트해야합니다. 업데이트 할.

흥미롭게도, 같은 페이지에서 잘 작동하는 다른 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