Question

我的视图片段只显示加载指示符。

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，这可能无效。

谢谢你，斯蒂芬

Answer 1

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

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

立即将加载设置为true，然后再加载回false。您应该从false和success回调中将加载设置为error。

模型更改不会强制ng-show更改可见性

1 个答案: