函数从数据库中获取数据时显示进度条

Question

我在这个按钮上有一个按钮点击我正在调用一个函数，例如

<button ng-Click=”getData()”></button>
<div class=”Progressbar” ng-show=” showProgress “></div>

控制器：

$scope.showProgress = false;
$scope.getData = function () {
    $scope.showProgress = !$scope.showProgress;
    myRepository.getAllData();
}

此功能需要较长时间才能从数据库中获取数据 我想在获取数据时显示一个SPINNER。

但是这个“Div”仅在整个功能完成后显示。 我想在功能完成之前显示它。 我怎么能做到这一点？

Answer 1

在加载数据之前设置showProgress = true，并在加载数据后设置为false。为了获得可靠的行为，请myRepository.getAllData返回promise，然后使用其then方法隐藏微调器：

$scope.getData = function() {
    $scope.showProgress = true;
    myRepository.getAllData().then(function() {
        $scope.showProgress = false;
    });
}