angular-spinner
angular-spinner copied to clipboard
urish
Question: why I can't start the spinner?
I've been using a different "way" of creating controllers, so is not exactly as your example. I can't get the spinner to start:
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'toaster', 'angularSpinner']);
angular.module('myApp').controller('productsController', function($scope, $modal, $http, toaster, usSpinnerService) {
$scope.hey = "hey!";
usSpinnerService.spin('loading-products'); // <-- not working, no errors thrown though.
...
});
My view is as follows:
<h1>Products</h1>
{{hey}}
<span us-spinner="{radius:30, width:10, length: 16}" spinner-key="loading-products"></span>
"hey is correctly displayed" (just as a reference)
Am I bringing the usSpinnerService service in an incorrect manner? Thank you.
I though of asking this in stackoverflow but here you can also tag the issue as a question, right? sorry if not.
I later tried the array notation for defining controllers (the one in your examples) and it didn't work either, uhm.
Just had this issue as well. It's because the $broadcast is firing before the $on is ready. While it isn't ideal, try wrapping your spin method in a timeout:
$timeout(function() {
usSpinnerService.spin('my-spinner');
}, 100);
Hello, I used $timeout to resolve this, too. Is there another solution for this issue?
I've encountered this issue as well and resolved it using $timeout. A solution for this would be greatly appreciated, or at least a not in the readme to alert new developers of this feature and the current workaround.
+1 for $timeout, same problem, same solution, but it's a little bit "dirty" ...
Here is working solution! I just put us-spinner directive above ng-view
`
<div class="container">
<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
<!-- All templates will load here -->
<div ng-view=""></div>
</div>
<!-- /.container -->
` and call in my controller
`
var MainCtrl = clientApp.controller('MainCtrl', ['$scope', '$http', 'usSpinnerService',
function ($scope, $http, usSpinnerService) {
usSpinnerService.spin('spinner-1');
$scope.products = [];
$http.get(AppConfig.SERVERURL + '/api/product/list')
.then(function (result) {
$scope.products = result.data;
});
usSpinnerService.stop('spinner-1');
}]);
`
I had the same problem, with the solution of @petesaia now it works, but I think it's a little dirty.
I liked @shahzadthathal solution, but we can also change the code to use Listeners instead of $rootScope.$broadcast, and then we can save the state of last value for every [spinner-key], and every listeners register we check the current value (if exist apply last change). I don't know if that is necessary. What you suggest folks?
