Question

我在我的控制器中实现了一个http get方法，以便从json中获取数据并在我的视图中显示。我想实现一个进度条。我已经实现了一个，但即使在加载数据后进度条也在运行。如何在加载数据之前显示进度条，并在加载数据后完成它。

我的控制器

 .controller('firstCtrl', ['$scope', '$http', 'ngProgressFactory', function ($scope, $http, ngProgressFactory) {


                $scope.progressbar = ngProgressFactory.createInstance();

                $http.get('https://feeds.citibikenyc.com/stations/stations.json').
                        success(function (data, status, headers, config) {

                            $scope.progressbar.start();


                            $scope.data = data; //first get the full object
                            $scope.mainArray = data.stationBeanList; 

                            $timeout($scope.progressbar.complete(), 100);

                        }).
                        error(function (data, status, headers, config) {
                            // called asynchronously if an error occurs
                            // or server returns response with an error status.
                        });
            }]);

Answer 1

由于http请求很可能很快，我认为您的解决方案并不是最好的。

如果我是你，我会在http请求开始时显示加载图标，然后在完成时显示消息/通知/。

你可以使用font-awesome：

Animated Icons

示例：

<div ng-show="isLoading">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>
</div>

和

.controller('firstCtrl', ['$scope', '$http', 'ngProgressFactory', function ($scope, $http, ngProgressFactory) {


                $scope.isLoading = null;

                $http.get('https://feeds.citibikenyc.com/stations/stations.json').
                        success(function (data, status, headers, config) {

                            $scope.isLoading = 'done';


                            $scope.data = data; //first get the full object
                            $scope.mainArray = data.stationBeanList; 

                            $timeout($scope.progressbar.complete(), 100);

                        }).
                        error(function (data, status, headers, config) {
                            // called asynchronously if an error occurs
                            // or server returns response with an error status.
                        });
            }]);

Angularjs进度条实现

1 个答案: