AngularJS HotTowel invoke spinner during ajax call - angularjs

Question

I am trying to invoking the spinner during any xhr call within the application. Whereas the spinner appeared when I click at menu or route to different page.
Index page
<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">
</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
I have changed the shell.js file according to following instruction.
From
$rootScope.$on(events.spinnerToggle, function (data))
To
$rootScope.$on(events.spinnerToggle, function (event, data))
And found from following link comments
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); }
);
};
})();
Directive looks like
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);
}
}]);
Thank you

Answer 1

I found my solution. Above code just working fine. Unfortunately, I placed my spinner.spinnerShow(); at wrong place in controller. Bellow controller function just working fine.
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();
});
};
Thanks