0

我有一个视图片段，它只显示一个加载指示器。

html:

<span class="app-loading-container">
    <span class="app-loading-animation" ng-show="loading"></span>
</span>

当我加载页面时跨度显示，但是当我调用我的刷新方法时没有任何变化，但我看到加载变量正在改变但跨度没有显示。我错过了什么来触发跨度显示吗？

控制器：

app.controller('SavedSearchesCtrl', ['$scope', '$filter', '$window', 'lookupService', 'savedSearchesService', 
    function($scope, $filter, $window, lookupService, savedSearchesService) {


    $scope.loading = true;
    $scope.items = [];
    $scope.alerts = [];



    function getSavedSearches() {
        savedSearchesService.getSavedSearches()
            .success(function(data) {
                $scope.items = data;
                $scope.search();
            })
            .error(function(error) {
                $scope.alerts.push({ type: 'error', msg: 'Unable to load saved searches data: ' + error.message });
            });
            $scope.loading = false;
    }

    $scope.refreshClick = function () {
        $scope.loading = true;
        savedSearchesService.refreshSavedSearches()
            .success(function(data) {
                $scope.items = data;
                $scope.search();
                $scope.alerts.push({ type: 'success', msg: 'Successfully refreshed saved searches data.'}); 
            })
            .error(function(error) {
                $scope.alerts.push({ type: 'error', msg: 'Unable to refresh saved searches data: ' + error.message });
            });
            $scope.loading = false;
    };

    $scope.deleteClick = function(id) {
        if (confirm("Delete this search? There's no undo...")) {
            savedSearchesService.deleteSavedSearch(id)
                .success(function () {
                    for (var i = 0; i < $scope.items.length; i++) {
                        var savedSearch = $scope.items[i];
                        if (savedSearch.SavedSearchKey === id) {
                            $scope.items.splice(i, 1);
                            $scope.search();
                            $scope.alerts.push({ msg: "Deleted saved search! Refreshing list." });
                            break;
                        }
                    }
                })
                .error(function (error) {
                    $scope.alerts.push({ type: 'error', msg: 'Unable to delete saved search: ' + error.message });     
                });
        }
    };

    getSavedSearches();
}]);

我为这篇文章删除了部分控制器，因此如果粘贴您的 IDE，这可能无法正常工作。

谢谢你，斯蒂芬

4

1 回答 1

3

由于 HTTP 请求是异步的，因此您实际上是在说：

$scope.refreshClick = function () {
    $scope.loading = true;
    // do something asynchronously
    $scope.loading = false;
};

它立即将加载设置为true，然后立即返回到false. 您应该将加载设置为false从内部success和error回调中代替。

于 2013-09-06T01:57:47.560 回答