在同一方法中启动和停止时，忙指示灯不工作

Question

我正在尝试在AngularJS应用程序中实现Busy指示器。我有几个样本，其中一个使用angular-Spinner。在我的应用程序中，当我通过按钮单击执行操作时，我调用其他一些工厂方法来执行一段时间（以秒为单位）的操作。所以在方法开始时，我启动微调器，在方法结束时我停止微调器。这不起作用。但是在异步调用的情况下，微调器工作正常。我不确定我是否遗漏了一些东西。请在下面找到代码段。提前谢谢。

var app = angular.module('myapp', ['angularSpinner']);
app.controller('MyController', ['$scope', 'usSpinnerService','$rootScope', function($scope, usSpinnerService, $rootScope) {
$scope.startcounter = 0;
$scope.startSpin = function() {
  if (!$scope.spinneractive) {
    usSpinnerService.spin('spinner-1');
    $scope.startcounter++;
  }
};

$scope.stopSpin = function() {
  if ($scope.spinneractive) {
    usSpinnerService.stop('spinner-1');
  }
};

$scope.DoSomeAction = function(){
  usSpinnerService.spin('spinner-1');

  for(var i=0; i<999999; i++){
    console.log(i);
  }
  usSpinnerService.stop('spinner-1');

};
$scope.spinneractive = false;

$rootScope.$on('us-spinner:spin', function(event, key) {
  $scope.spinneractive = true;
});

$rootScope.$on('us-spinner:stop', function(event, key) {
  $scope.spinneractive = false;
}); }]);

Spinner代码：

/**
* angular-spinner version 0.5.0
* License: MIT.
* Copyright (C) 2013, 2014, Uri Shaked and contributors.
*/

(function (root) {
'use strict';

function factory(angular, Spinner) {

    angular
        .module('angularSpinner', [])

        .factory('usSpinnerService', ['$rootScope', function ($rootScope) {
            var config = {};

            config.spin = function (key) {
                $rootScope.$broadcast('us-spinner:spin', key);
            };

            config.stop = function (key) {
                $rootScope.$broadcast('us-spinner:stop', key);
            };

            return config;
        }])

        .directive('usSpinner', ['$window', function ($window) {
            return {
                scope: true,
                link: function (scope, element, attr) {
                    var SpinnerConstructor = Spinner || $window.Spinner;

                    scope.spinner = null;

                    scope.key = angular.isDefined(attr.spinnerKey) ? attr.spinnerKey : false;

                    scope.startActive = angular.isDefined(attr.spinnerStartActive) ?
                        attr.spinnerStartActive : scope.key ?
                        false : true;

                    scope.spin = function () {
                        if (scope.spinner) {
                            scope.spinner.spin(element[0]);
                        }
                    };

                    scope.stop = function () {
                        if (scope.spinner) {
                            scope.spinner.stop();
                        }
                    };

                    scope.$watch(attr.usSpinner, function (options) {
                        scope.stop();
                        scope.spinner = new SpinnerConstructor(options);
                        if (!scope.key || scope.startActive) {
                            scope.spinner.spin(element[0]);
                        }
                    }, true);

                    scope.$on('us-spinner:spin', function (event, key) {
                        if (key === scope.key) {
                            scope.spin();
                        }
                    });

                    scope.$on('us-spinner:stop', function (event, key) {
                        if (key === scope.key) {
                            scope.stop();
                        }
                    });

                    scope.$on('$destroy', function () {
                        scope.stop();
                        scope.spinner = null;
                    });
                }
            };
        }]);
}

if (typeof define === 'function' && define.amd) {
    /* AMD module */
    define(['angular', 'spin'], factory);
} else {
    /* Browser global */
    factory(root.angular);
}
}(window));