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ます。代わりに、およびコールバック内で読み込みをfalsefrom に設定する必要があります。successerror

于 2013-09-06T01:57:47.560 に答える