當作用域對象在內部將值更改爲控制器的作用域時更新UI

我在寫一個簡單的小文件上傳器，我將輸入文件放入$scope.files並通過ajax調用上傳，然後成功移動$scope.files至$scope.successfulUploads目的。我想在設置值後立即顯示內嵌列表successfulUploads，它與$scope.files對象一起工作，控制檯顯示$scope.successfulUploads，因爲它應該是。如果你願意的話，我只需要寫一個可觀測值。當作用域對象在內部將值更改爲控制器的作用域時更新UI

這裏是我的代碼：

控制器

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

<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"精美的作品。

並沒有人建議使用blueimps文件上傳，是的這是一個偉大的外觀文件上傳與偉大的功能，但我需要這個與我已經定義的角模塊，當我試圖轉換它它停止工作。今天我下載了完整的源代碼，並在本地主機上「按原樣」運行，它給了我相同的確切錯誤，並且我處於截止日期。也許以後我可以重新訪問它。

來源

2013-06-19 Jonathan Jones

你還沒有給出任何錯誤的細節。 – Chandermani

這是因爲沒有錯誤，因爲主題指示我正在嘗試更新視圖，因爲我的HTML使用'successfulUploads'對象顯示，當我記錄該對象時，我獲得了我期望的數組文件 –

緊接着第二：

$scope.files = [];

地址：

$scope.$apply()

那麼它應該工作。

來源

2013-06-19 04:16:28 Nir

完美，謝謝。這正是我所期待的。我會盡快接受。 –

當作用域對象在內部將值更改爲控制器的作用域時更新UI

回答

相關問題