javascript - Angular.js 中的微调器

Question

我想使用一个微调器，我可以在其他一些 api 调用期间显示它以获得更好的用户体验。我遇到过许多做完全相似事情的现有 github 项目。

https://github.com/cgross/angular-busy
https://github.com/urish/angular-spinner

但我无法使用任何现有项目。我想在我开始写我自己的东西之前，我想知道我正在寻找的东西是否可以使用这些项目或任何其他现有项目来完成。

要求:

1. 在其他一些 API 调用期间，例如上传图片、获取一些数据、删除图片等，我想显示一个背景褪色的微调器。得到结果后，我可以再次显示背景并移除微调器。
2. 我想通过我的 Controller 而不是我的 html 使用此微调器启动/停止。
3. 默认情况下，我不希望所有 xhr 请求都使用此微调器。

我认为 angular-busy demo确实解决了上述大部分要求，只是它需要 html 中的 promise 参数。无论如何，我可以通过我的 Controller 动态控制启动/停止而不是给出 promise 。

Angular 旋转器 demo很好，但它不会淡出背景。有什么方法可以淡出背景吗？

谁能给我一些建议，我该如何解决我的问题？

Answer 1

我总是用这个逻辑创建我自己的微调器:

js:

app.directive('ngSpinnerBar', ['$rootScope',
    function ($rootScope) {
        return {
            link: function (scope, element, attrs) {
                // by defult hide the spinner bar
                element.addClass('hide'); 

                // count how many time requests were sent to the server
                // so when they all done the spinner will be removed
                scope.counter = 0;

                $rootScope.$on('$stateNetworkRequestStarted', function () {
                    scope.counter++;
                    element.removeClass('hide'); // show spinner bar
                    //  $('body').addClass('page-on-load');
                });

                $rootScope.$on('$stateNetworkRequestEnded', function () {
                    scope.counter--;
                    if (scope.counter <= 0) {
                        scope.counter = 0;
                        element.addClass('hide'); // show spinner bar
                        //  $('body').removeClass('page-on-load'); // remove page loading indicator
                    }

                });

            }
        };
    }
])

html:

<div ng-spinner-bar></div>

如您所见，每次我向 api 发送请求时，我都会显示微调器(css​​ 创建旋转 - link)，当结果返回时，我会发送事件以隐藏微调器。

如果你想让事情变得更容易，你应该创建一个发送所有 api 请求的服务(包装 $http)。这样您就可以确保每个请求都会显示微调器。

编辑

google 的第一个结果给了我 this - 以 Angular 淡化背景