lavinjj / angularjs-spinner Goto Github PK

I have some complex pages where I'm looking to apply spinners to multiple nested views. Is there a way to accomplish this with the angularjs-spinner? So far, what I'm seeing is each spinner instance fires on every request. I was hoping to tie it to individual scopes, but not sure how :P

Hi,

cloned the repo, ran the sample01 - and it doesn't work.
The event is never caught in the directive.

Thanks.

In your pub/sub model you are broadcasting on the root scope, which bubbles down through every scope in the app (it's easy to have hundreds) looking for listeners.

You can achieve the same architecture with much better performance by using $rootScope.emit(...) rather than $rootScope.broadcast(....) On the listening side you'll need to change $scope.on(...) to $rootScope.on(...)

In my app the performance different was fairly huge in UI responsiveness, to the extent that I couldn't achieve my design until I made this modification.

See here for an explanation of avoiding .broadcast: http://stackoverflow.com/a/19498009/288703

and here for some quantification of the performance difference:

http://jsperf.com/rootscope-emit-vs-rootscope-broadcast

Thanks for the article.. was going to leave a comment there, but saw the link to the GitHub code.

I would recommend that you rework the DOM manipulation in your responseInterceptor code here:
https://github.com/lavinjj/angularjs-spinner/blob/master/app/app/app.js#L30

As a general rule, Angular code should only perform DOM work inside of directives.

Instead of hard-coding the element in there, you can broadcast an event like this:

$rootScope.$broadcast('event:httpRequestStarted');

$rootScope.$broadcast('event:httpRequestCompleted');

Then inside of the controller you can set a property on the $scope based on the event.

// default to showing
$scope.loadingVisible = true;

$scope.$on('event:httpRequestStarted', function() {
  $scope.loadingVisible = true;
});

$scope.$on('event:httpRequestCompleted', function() {
  $scope.loadingVisible = true;
});

In the markup, you can use the ngShow directive on your element
https://github.com/lavinjj/angularjs-spinner/blob/master/app/index.html#L25

So you would no longer need an id, and your markup would use your scope value to toggle its visibility:

 <div ngShow="loadingVisible" class="row-fluid ui-corner-all" style="padding: 0 .7em; display: none;">

Thanks for the inspiration!