NG-風格沒有更新速度不夠快

Question

我有這樣的進度條

<div class="progress progress-striped" ng-class"{active: file.isUploading()}"> 
    <div class="progress bar" role="progressbar" ng-style="{'width' : (file.sizeUploaded()/file.size * 100) + '%'}"></div> 
</div> 

與Chrome瀏覽器開發工具調試後，我送了好寬度NG-風格。當我停止執行（在源代碼中使用F8）時，樣式更新爲良好的寬度。如果我不停止執行，酒吧會緩慢下降到只有1％，然後當上傳達到100％時，酒吧會從1％到100％。

我正在使用ng-flow以上傳我的文件，而不是一個完整的文件。

下面一些圖片顯示的行爲：
一是形象展示它沒有更新的樣式足夠快（在0％的條不顯示一個小藍條） 這是發生了什麼時，文件已完全上傳 當我在開發人員工具源代碼（調試）中按F8風格已正確更新。

這是帶進度條上傳的link to a working example。

我嘗試使用ng樣式的file.progress（），但它做了相同的行爲。在沒有調試器的情況下，上傳的大小變化很好，它實際上只是ng風格，似乎沒有更新。

編輯：在Firefox中進行測試時，文件加載速度稍快，當文件達到100％時，加載速度會高達5-10％。

編輯2：

sizeUploaded: function() { 
    var size = 0; 
    each(this.files, function (file) { 
    size += file.sizeUploaded(); 
    }); 
    return size; 
} 

這裏的HTML ...

<div flow-init flow-name="flow" class="span5 clearfix"> 
    <div class="alert" flow-drop> 
     Drag And Drop your file(s) here 
    </div> 

    <span class="btn" flow-btn><i class="icon icon-file"></i> Upload File</span> 

    <div ng-repeat="file in flow.files"> 
     {{file.name}} ({{file.size}} kB) 
     <br /> 
     IS COMPLETE: {{file.isComplete()}} 
     <br /> 
     ERROR: {{file.error}} 
     <br /> 
     SIZE UPLOADED: {{file.sizeUploaded()}} kB 
     <br /> 
     IS UPLOADING: {{file.isUploading()}} 
     <br /> 
     {{file.sizeUploaded()}} kB/{{file.size}} kB | {{file.sizeUploaded()/file.size * 100 | number:0}}% 
     <div class="progress active progress-striped" ng-class"{active: file.isUploading()}"> 
      <div class="progress bar" role="progressbar" ng-style="{'width' : (file.sizeUploaded()/file.size * 100) + '%'}">{{file.sizeUploaded()}}/{{file.size}} kB | {{file.sizeUploaded()/file.size * 100 | number:0}}%</div> 
     </div> 
     <input type="button" ng-click="file.resume()" value="Start/Resume" /> 
     <input type="button" ng-click="file.pause()" value="Pause"/> 
    </div> 


    <table> 
     <tr ng-repeat="file in flow.files"> 
      <td>{{$index+1}} | </td> 
      <td>{{file.name}}</td> 
     </tr> 
    </table> 
</div> 

附加說明：我使用的角度1.1.5

Answer 1

不看你的代碼或者是小提琴例證了這個問題，我只能想到幾種可能性：

請記住，角將只會更新在模型值發生變化時觀看您的視圖。所以你可以做的是建立一個模型屬性，說

$scope.uploadProgress 

，並使用$timeout（或$interval爲角1.2）當上載完成你停止其執行，以更新它，然後。

那麼你有一個定期更新的屬性，綁定你的視圖到後：

<div class="progress progress-striped" ng-class"{active: file.isUploading()}"> 
    <div class="progress bar" role="progressbar" ng-style="{'width' : uploadProgress + '%'}"></div> 
</div> 

我相信問題是，角度不評價(file.sizeUploaded()/file.size * 100)的改變，至少我覺得不應該做到這一點，你應該更新一個屬性和角度應該消化它。

讓我知道如何去，所以我可以更新我的答案，如果這不起作用。

您也可以嘗試看屬性，並創建返回其值的函數，那麼你綁定的div該值：

//this object has all the info about the upload 
$scope.uploadObject = { 
    uploadedProgress: 0 
} 

$scope.barStyle = function() { 
     return { 
      width: $scope.uploadObject.uploadedProgress + '%', 
      color: "#FFF" //Any property you may want to add 
     }; 
}; 

$scope.$watch("uploadObject", $scope.barStyle); 

然後更新您的視圖，以反映這一變化：

<div class="progress progress-striped" ng-class"{active: file.isUploading()}"> 
    <div class="progress bar" role="progressbar" ng-style="barStyle()"></div> 
</div> 

Answer 2

我認爲這個問題可能是我和我的朋友用圖片上傳回來的。問題在於，客戶端會跟蹤整個上傳事件的前1％，這是文件離開客戶端併到達服務器端所需的時間。

其餘的99％是在服務器端實際處理所述文件並將其返回給客戶端。由於我們的服務器並未向客戶端發送事件進展（如果確實如此，我們可以正確跟蹤其進度），因此我們在1％的時間內保持相當長的一段時間，然後立即跳到100％作爲文件回到客戶端。

我們糾正這種情況的方法是將服務器端的圖像處理放在後臺作業中，並簡單地將當前上傳大小的因子（在您的案例中爲file.sizeUploaded()）與100相提並論。這使得流暢的進度條對於事件的第一部分而言，這對於日常用戶來說確實很有趣。

該過程的其餘部分移至後臺作業，然後我們保留上傳文件的本地副本（通過各種HTML5數據API），以便能夠向用戶呈現圖像。從某種意義上說，這樣我們就可以將事件與服務器分離開來，並且可以繼續我們愉快的業務。

現在，這一切都很好 - 但我不確定這是否會以任何方式影響你。我甚至不確定flow.js是否已經默認這樣做，因爲XHR2 Progress Events本身並不跟蹤服務器端的事情。因此，圖書館已經這樣做是有道理的，因爲你不可能建立像flow.js這樣的庫，並依靠服務器發佈事件（以及我認爲有辦法）。

在任何情況下，您是否可以嘗試將因子提高100倍，並查看獲得的結果？我很好奇結果可能是什麼，如果我們實際上坐在同一條船上。

祝你好運：）

Answer 3

如果在本地測試這一點，那麼您的上傳時間應該不會超過一秒的時間。 Flow.js的配置參數名稱爲progressCallbacksInterval，如果將其設置爲高，那麼您將無法看到任何進度。 嘗試將其設置爲0，這意味着每次進度事件視圖都會更新。

Answer 4

設置的百分比時，您應按如下方式使用file.progress：

file.progress() * 100