angularjs - ng-style 更新速度不够快

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-style。当我停止执行时（在源代码中使用 F8），样式会更新到合适的宽度。如果我不停止执行，条形图会慢慢变为勉强 1%，然后当上传达到 100% 时，条形图会从 1 变为 100%。

我正在使用ng-flow 来上传我的文件，而不是一个完整的文件。

这里有一些图片来展示这种行为：
第一张图片显示它没有足够快地更新样式（0% 的栏没有显示一个小的蓝色条） 当文件完全上传时会发生这种情况 当我按 F8 时开发者工具源代码（调试）样式更新正确。

这是一个带有进度条的上传工作示例的链接。

我尝试在 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>

附加说明：我使用的是 Angular 1.1.5

Answer 1

设置百分比时，应按如下方式使用 file.progress：

file.progress() * 100

Answer 2

如果您在本地对此进行测试，那么您的上传时间应该不到一秒钟。Flow.js 的配置参数名为progressCallbacksInterval，如果设置为高，则看不到任何进度。尝试将此设置为 0，这意味着在每个进度事件视图上都会更新。

Answer 3

我认为问题可能是我和我的朋友们在上传图片时遇到的问题。问题在于，客户端跟踪整个上传事件的前 1% 作为文件离开客户端并到达服务器端所需的时间。

剩下的 99% 是在服务器端实际处理该文件，并将其返回给客户端。由于我们的服务器没有向客户端发送有关该进度的事件（如果发送了，我们就可以正确跟踪其进度），我们在 1% 上静止了很长一段时间，然后立即跳到 100% 作为文件回到客户端。

我们纠正这个问题的方法是将服务器端的图像处理放在后台作业中，并简单地将当前上传的大小（在您的情况下file.sizeUploaded()）的因子提高 100。这为第一部分呈现了一个流畅的进度条事件，对您的日常用户来说真正有趣的事件。

该过程的其余部分移至后台作业，然后我们保留上传文件的本地副本（通过各种 HTML5 数据 API），以便能够将图像呈现给用户。通过这种方式，我们在某种意义上将事件与服务器解耦，并且可以继续我们的快乐业务。

现在，这一切都很好——但我不确定这是否会以任何方式或形式影响你。我什至不确定 flow.js 是否已经默认执行此操作，因为仅 XHR2 进度事件不会跟踪事物的服务器端。因此，库已经这样做是有意义的，因为您无法构建像 flow.js 这样的库并依赖于服务器发出事件（我想有办法）。

无论如何，您可以尝试将系数提高 100 倍，看看会得到什么结果吗？我很好奇结果可能是什么，以及我们是否真的坐在同一条船上。

祝你好运 ： ）

Answer 4

在不查看您的代码或举例说明该问题的小提琴的情况下，我只能想到几种可能性：

请记住，Angular 只会在模型值更改时更新您的视图。所以你可以做的是创建一个模型属性，比如说

$scope.uploadProgress

并使用$timeout（或$interval从 Angular 1.2 开始）对其进行更新，然后在上传完成时停止执行。

然后，在您拥有定期更新的属性后，您将视图绑定到该属性：

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

我认为问题在于 Angular 没有评估 的变化(file.sizeUploaded() / file.size * 100)，至少我觉得它不应该那样做，你应该更新一个属性并且 Angular 应该消化它。

让我知道它是怎么回事，如果这不起作用，我可以更新我的答案。

您还可以尝试查看属性并创建一个返回其值的函数，然后将 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>