スコープオブジェクトがコントローラのスコープ内の値を内部的に変更する場合のUIを更新

Question

入力ファイルを$scope.filesに入力し、Ajaxコールをアップロードしてから成功したら、を$scope.successfulUploadsに移動する簡単なファイルアップローダを作成していますオブジェクト。値が設定されるとすぐにsuccessfulUploadsのリストをインラインで表示したいので、$scope.filesオブジェクトで動作し、コンソールには$scope.successfulUploadsが表示されます。私はあなたが望むならば、観察可能なものを書くだけでよいのです。

<span class="span2 btn btn-success fileinput-button"> 
    <span>Add Files</span> 
    <input type="file" multiple ng-model="files" file-change> 
</span> 
<table class="table table-hover table-striped"> 
    <tbody> 
     <tr ng-repeat="file in successfulUploads"> 
      <td>{{file.name}}</td> 
      <!--<td><a href="#" class="btn btn-danger">Delete</a></td>--> 
     </tr> 
    </tbody> 
</table> 
<div class="muted text-left">Uploaded: {{ successfulUploads.length }}</div> 
</div> 

---

私はng-repeat="file in files"を使用する場合、それは見事に動作しますが、言ったように：

$scope.files = []; 
$scope.successfulUploads = []; 

$rootScope.$on('upload:success', function() { 
    //console.log('Controller: on `success`'); 
    for (var i = 0; i < $scope.files.length; i++) { 
     $scope.successfulUploads.push($scope.files[i]); 
    } 
    $scope.files = []; 
    console.log('successfulUploads: ' + $scope.successfulUploads); 
}); 

HTML

コントローラー：

は、ここに私のコードです。

誰かがファイルアップローダーblueimpsを使用することを提案する前に、それはすばらしい機能を備えたすばらしいファイルアップローダーですが、これを私が既に定義した角度モジュールで処理する必要があります。それは動作を停止しました。今日私は完全なソースをダウンロードし、それを私のlocalhostに "そのまま"走らせました。それは私に同じ正確なエラーを与えていました。そして私は締め切りです。多分私はそれを再訪することができます。

Answer 1

秒後に右：

$scope.files = []; 

追加：

$scope.$apply() 

を次にそれが動作するはずです。