Angular.js中的微调器

Question

我想使用一个微调器，可以在其余的api调用中显示该微调器，以获得更好的UX。 我遇到了许多现有的github项目，它们的功能完全相似。

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

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

需求：

1. 在其他一些api调用中，例如上载图像，获取一些数据，删除图像等，我想显示一个旋转器，其背景已褪色。 得到结果后，可以再次显示背景并删除微调器。
2. 我想使用此微调器，并从我的控制器而不是从html进行启动/停止。
3. 默认情况下，我不希望所有xhr请求都使用此微调框。

我认为忙于忙碌的演示确实解决了上述大多数要求，只是它需要html中的promise参数。 无论如何，我可以通过控制器动态地控制启动/停止，而不用做出承诺。

角度旋转演示很好，但不会淡出背景。 有什么方法可以淡出背景吗？

谁能给我一些指点我该如何解决我的问题？

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创建Spinning- link ），结果返回时，我会发送事件以隐藏微调框。

如果您想让事情变得更轻松，则应该创建一个发送所有api请求的服务（包装$ http）。 这样，您可以确保每个请求都会显示微调框。

编辑

第一个结果在谷歌给了我这个 -淡入背景角

Answer 2

看起来http://bsalex.github.io/angular-loading-overlay/_site/符合要求。

例如：

 var app = angular.module('app-http-integration-with-reference-id-and-matchers', [ 'bsLoadingOverlay', 'bsLoadingOverlayHttpInterceptor' ]) .factory('randomTextInterceptor', function(bsLoadingOverlayHttpInterceptorFactoryFactory) { return bsLoadingOverlayHttpInterceptorFactoryFactory({ referenceId: 'random-text-spinner', requestsMatcher: function(requestConfig) { return requestConfig.url.indexOf('hipsterjesus') !== -1; } }); }) .factory('randomUserInterceptor', function(bsLoadingOverlayHttpInterceptorFactoryFactory) { return bsLoadingOverlayHttpInterceptorFactoryFactory({ referenceId: 'random-user-spinner', requestsMatcher: function(requestConfig) { return requestConfig.url.indexOf('randomuser') !== -1; } }); }) .config(function($httpProvider) { $httpProvider.interceptors.push('randomTextInterceptor'); $httpProvider.interceptors.push('randomUserInterceptor'); }).run(function($sce, bsLoadingOverlayService) { bsLoadingOverlayService.setGlobalConfig({ /* It is only an example, don't use this url in production. Copy this template to your code base or use integration with Spin.js (see Docs & Examples) */ templateUrl: $sce.trustAsResourceUrl('https://raw.githubusercontent.com/bsalex/angular-loading-overlay/gh-pages/_site/loading-overlay-template.html') }); }); app.controller('HttpIntegrationWithReferenceIdAndMatchersController', function($scope, $http, $sce, bsLoadingOverlayService) { $scope.randomText = $sce.trustAsHtml('Fetch result here'); $scope.randomUser = undefined; $scope.fetchRandomText = function() { $http.get('http://hipsterjesus.com/api/') .success(function(data) { $scope.randomText = $sce.trustAsHtml(data.text); }) .error(function() { $scope.randomText = $sce.trustAsHtml('Can not get the article'); }); }; $scope.fetchRandomUser = function() { $http.get('https://randomuser.me/api/') .success(function(data) { $scope.randomUser = data.results[0]; }); }; }); 

 .random-result { display: flex; height: 170px; margin-top: 1em; } .random-result__text, .random-result__user { position: relative; overflow: auto; border: 2px dashed #C00; flex: 1; margin: 0.5em; padding: 0.5em; text-align: center; } .user__photo { width: 100px; height: 100px; border-radius: 50%; margin: 0; } .user__name { font-size: 1.5em; margin: 0.5em; padding: 0; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <script src="https://rawgit.com/bsalex/angular-loading-overlay/master/dist/angular-loading-overlay.js"></script> <script src="https://rawgit.com/bsalex/angular-loading-overlay-http-interceptor/master/dist/angular-loading-overlay-http-interceptor.js"></script> <div ng-app="app-http-integration-with-reference-id-and-matchers"> <div ng-controller="HttpIntegrationWithReferenceIdAndMatchersController"> <div class="well well-lg bs-loading-container"> <button ng-click="fetchRandomText()">Fetch random text</button> <button ng-click="fetchRandomUser()">Fetch random user</button> <div class="random-result"> <div class="random-result__text" bs-loading-overlay bs-loading-overlay-reference-id="random-text-spinner" bs-loading-overlay-delay="3000"> <p ng-bind-html="randomText"></p> </div> <div class="random-result__user user" bs-loading-overlay bs-loading-overlay-reference-id="random-user-spinner" bs-loading-overlay-delay="3000"> <div ng-if="randomUser"> <img ng-src="{{randomUser.picture.large}}" alt="" class="user__photo" /> <p class="user__name"> {{randomUser.name.first}} {{randomUser.name.last}} </p> </div> </div> </div> </div> </div> </div> 

在上面的代码段中，我使用了与$ http服务的集成。 它匹配请求并显示具有指定referenceId微调器。

此外，还提供以下功能：

• 您可以向控制器显示和隐藏微调框，注入bsLoadingOverlayService并调用bsLoadingOverlayService.start(); 和bsLoadingOverlayService.stop(); ;
• 您可以使用bsLoadingOverlayService.wrap()包装Promises以显示和隐藏微调bsLoadingOverlayService.wrap() 。
• 您可以创建预配置的处理程序（ bsLoadingOverlayService.createHandler({referenceId: 'handler-overlay'}); ），将选项保留在一个位置，然后只需调用preconfiguredHandler.start(); 和preconfiguredHandler.stop();