Question

我正在使用bootstrap-ui progressbar和AngularJS $ http。我执行一个AJAX请求可能需要一些时间，我希望进度条与angular接收的数据量同步。例如：如果我期望来自服务器的100Mo数据，当Angular收到10Mo时，进度条将为10％，20Mo为20％，因此一个...我认为我可以使用拦截器来捕获标题＆＃34;内容-length＆＃34;，但我不确定它是否会起作用，即使它有效，我仍然不知道如何捕获数据量

Answer 1

Angular仅在收到来自服务器的响应时调用$ http帖子或获得成功回调。

您可以使用以下代码来显示进度条。它将快速进步，随着时间的推移，它将进展缓慢。为用户提供从服务器获取响应的虚假视图。

       var timer;
        $scope.counter = 5;
        $scope.stopCounter = function () {
            $timeout.cancel(timer);
            timer = null;
        };
        $scope.startCounter = function () {
            if (timer === null) {
                updateCounter();
            }
        };
        $rootScope.$$childHead.searchOrigin = false;
        $rootScope.$$childHead.searchDestination = false;

        var updateCounter = function () {
            $scope.counter++;
            if ($scope.counter > 90) {
                timer = $timeout(updateCounter, 1000);
            } else if ($scope.counter > 95) {
                timer = $timeout(updateCounter, 3000);
            } else {
                timer = $timeout(updateCounter, 100);
            }
        };
        updateCounter();

只需将进度条与作用域的计数器变量绑定即可。在成功回调收到响应或在错误回叫中收到错误时调用stopCounter函数。希望有所帮助。

如何使用Angular JS将进度条与已加载的数据绑定

1 个答案: