DOM manipulation in responseInterceptor

[Iristyle]

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!

[lavinjj]

You are completely correct. I originally wrote this back when I was first starting out and didn't really grasp everything at the time. I'll spend some time updating the code to follow best practices.

Thanks!

[Iristyle]

No prob -- thanks again for the article / contributions to the Angular community!

[lavinjj]

I've updated the code and this issue has been resolved.