Question

我想创建一个加载指示器，就像一个小旋转器，只是表明我的角度应用程序当前正在从服务器加载东西

我使用restangular作为我的资源，返回请求的承诺。

我的想法如下：创建一个服务，它从restangular传递promises。检查是否所有承诺都已解决，并使用$q.all()

将加载设置为false

现在我想添加一个指令，该指令传递加载变量并显示一个微调器，具体取决于loading = true / false

我创建了一个plunkr来说明这个想法：http://plnkr.co/edit/11QHDUkzredRpZu5NkBT?p=preview

我有一些问题：

如果不在每个指令中添加服务请求资源，我如何拦截承诺？
我的addPromise函数中的回调被调用两次（这应该没问题，很难触发更改事件）
传递的loading值不反映服务中的更改

这里来自plunkr的代码：

angular.module('myApp', ['restangular']);

angular.module('myApp').factory('LoadingService', ['$q' , function ($q) {

    var promises = [];
    var loading = false;

    function addPromise(promise) {

        promises.push(promise);
        loading = true;

        var allPromises = $q.all(promises);

        allPromises.then(function() {
            promises = [];
            loading = false;
            console.log('finished loading');
        });

        console.log('loading');
    }

    return {
        addPromise : addPromise,
        isLoading : loading
    };

}]);


angular.module('myApp').directive('loadingIndicator', ['LoadingService', function(LoadingService) {

    return {
        restrict : 'E',
        scope : {},
        template : '<i ng-show="loading" class="glyphicon glyphicon-refresh" />',
        link : function (scope) {
            scope.loading = LoadingService.isLoading;
        }
    };

}]);

angular.module('myApp').directive('someDirective', ['LoadingService', 'Restangular', function(LoadingService, Restangular) {

    function someDirectiveController ($scope, $q, Restangular) {

        var promise = Restangular.one('dummy').getList();

        LoadingService.addPromise(promise);

    }

    return {
        restrict : 'E',
        scope : {},
        template : '<div>I am a directive loading some stuff</div>',
        controller: ['$scope', '$q', 'Restangular', function($scope, $q, Restangular) {
            return someDirectiveController($scope, $q, Restangular);
        }]
    };

}]);

Answer 1

为此，我只使用requestInterceptor开始加载，responseInterceptor和errorInterceptor停止加载，就是这样:)。有了它，你可以得到这种加载行为:)

加载restangular资源的指标

1 个答案: