0

向用户显示应用程序正在等待服务器回答的视觉反馈的角度方式如何？

目前我有以下代码的工厂

app.factory('MyAppFact', ['$http', '$q', 
function($http, $q) {
    function _success(data, status) {
        document.body.classList.remove('waitserver')
        if (data.status == 'OK') {
            this.resolve(data);
        } else {
            this.reject(data);
        }   
    }
    function _error(data, status) {
        document.body.classList.remove('waitserver')
        this.reject(status})    
    }
    return {
        changeLocale: function(locale){
            var d = $q.defer();
            document.body.classList.add('waitserver');
            $http.get('/changeLocale/'+locale).success(_success.bind(d), 
                _error.bind(d));
            return d.promise;
        },
        login: function(uname, passwd, keep) {
            var d = $q.defer();
            document.body.classList.add('waitserver');
            $http.post('/login', {uname:uname, passwd:passwd, keep:keep}
                ).success(_success.bind(d), _error.bind(d));
            return deferred.promise;
        },
        register: function(user) {
            var d = $q.defer();
            document.body.classList.add('waitserver');
            $http.post('/register', {user:user}).success(_success.bind(d), 
                _error.bind(d));
            return deferred.promise;
        },

        ...

    }
}]);

尽管此代码有效，但我在文档正文中添加了一个 css 类，而根据 angularjs 文档，我不应该在工厂方法中更改 DOM，从而违反了 MVC 的明确分离

但我看不出在这种情况下如何完成分离。

4

1 回答 1

0

您可以组合一些全局状态、ng-class指令（应用于<body>动态的、Angular 管理的内容的包装元素）和此处描述的 HTTP 拦截器。

所以全局状态就像一个活动请求计数器，实现为服务或$rootScope. 为简单起见，让我们考虑第二个，尽管第一个似乎更正确：

$rootScope.activeRequestsCounter = 0;

您注册操纵计数器的拦截器：

$provide.factory('myHttpInterceptor', function($rootScope) {
    function increase() {
        $rootScope.activeRequestsCounter++;
    }

    function decrease() {
        $rootScope.activeRequestsCounter--;
    }

    return {
        request: increase,
        requestError: decrease,
        response: decrease,
        responseError: decrease
    };
});


// in some config block:
$httpProvider.interceptors.push('myHttpInterceptor');

在 HTML 中：

<body ng-class="{waitserver: activeRequestsCounter &gt; 0}">

这是操作原理，细节可能需要细化。您获得的是您不再需要担心在每个服务调用中添加/删除类。您可以调用多个服务，计数器将正确更新。而且您不会在服务内部操作 DOM（更简洁的代码）。

于 2013-10-14T09:12:50.410 回答