Question

我试图在应用程序中的任何xhr调用期间调用微调器。而当我点击菜单或路由到不同页面时，微调器出现了。

索引页

<aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel (optional) -->
                <div data-cc-sidebar data-ng-controller="sidebar as vm">
                    <ul class="sidebar-menu">
                        <li data-ng-repeat="r in vm.navRoutes">
                            <a href="#{{r.url}}" data-ng-bind-html="r.config.settings.content"></a>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- /.sidebar -->
        </aside>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper" data-ng-controller="shell as vm">
            <!-- Content Header (Page header) -->
            <section class="content-header"></section>
            <!-- Main content -->
            <section class="content">
                <!-- Your Page Content Here -->
                <div data-ng-show="vm.isBusy" class="page-splash dissolve-animation">
                    <div data-cc-spinner="vm.spinnerOptions"></div>
                    <div class="page-splash-message page-splash-message-subtle">{{vm.busyMessage}}</div>
                </div>
                <div data-ng-view class="shuffle-animation"></div>
            </section><!-- /.content -->
        </div><!-- /.content-wrapper -->

Shell.js

我已根据以下说明更改了shell.js文件。从 $ rootScope。$ on（events.spinnerToggle，function（data））至 $ rootScope。$ on（events.spinnerToggle，function（event，data））

从以下链接评论中找到

http://johnpapa.net/hot-towel-angular/

(function () { 
    'use strict';

    var controllerId = 'shell';
    angular.module('app').controller(controllerId,
        ['$rootScope', 'common', 'config', shell]);

    function shell($rootScope, common, config) {
        var vm = this;
        var logSuccess = common.logger.getLogFn(controllerId, 'success');
        var events = config.events;
        vm.busyMessage = 'Please wait ...';
        vm.isBusy = true;
        vm.spinnerOptions = {
            radius: 40,
            lines: 7,
            length: 0,
            width: 30,
            speed: 1.7,
            corners: 1.0,
            trail: 100,
            color: '#F58A00'
        };

        activate();

        function activate() {
            logSuccess('SIPPRES loaded!', null, true);
            common.activateController([], controllerId);
        }

        function toggleSpinner(on) { vm.isBusy = on; }

        $rootScope.$on('$routeChangeStart',
            function (event, next, current) { toggleSpinner(true); }
        );

        $rootScope.$on(events.controllerActivateSuccess,
            function (data) { toggleSpinner(false); }
        );

        $rootScope.$on(events.spinnerToggle,
            function (event,data) { toggleSpinner(data.show); }
        );
    };
})();

指令看起来像

app.directive('ccSpinner', ['$window', function ($window) {
        // Description:
        //  Creates a new Spinner and sets its options
        // Usage:
        //  <div data-cc-spinner="vm.spinnerOptions"></div>
        var directive = {
            link: link,
            restrict: 'A'
        };
        return directive;

        function link(scope, element, attrs) {
            scope.spinner = null;
            scope.$watch(attrs.ccSpinner, function (options) {
                if (scope.spinner) {
                    scope.spinner.stop();
                }
                scope.spinner = new $window.Spinner(options);
                scope.spinner.spin(element[0]);
            }, true);
        }
    }]);

谢谢

Answer 1

我找到了解决方案。上面的代码工作正常。不幸的是，我放置了我的spinner.spinnerShow（）;在控制器的错误位置。 Bellow控制器功能正常工作。

function updateColor(updatedColor) {
            spinner.spinnerShow();
            return datacontextSetting.updateColor(updatedColor).then(function (data) {
                $scope.newColor = data;
                $uibModalInstance.close($scope.newColor);
            }, function (response) {

                $scope.frmColor.$valid = false;

                // Here is where we can catch the errors and start using the response.
                if (!angular.isUndefined(response.statusCode)) {
                    $scope.errorMessage = response.statusCode + "\n";
                }

                if (response.modelState) {
                    for (var key in response.modelState) {
                        $scope.errorMessage += response.modelState[key] + "\n";
                    }
                }
                if (response.message) {
                    $scope.errorMessage += response.message;
                }
            }).finally(function () {
                spinner.spinnerHide();
            });
        };

由于

AngularJS HotTowel在ajax调用期间调用微调器

1 个答案: