0

I want to show some progress circle while I'm waiting (polling) the server. I'm using some jquery circle-progress plugin for that. I want to figure out what is the most common approach to conditionally start circle progress, then at some time to notify it to stop. Then I want to allow this circle to complete full round (extra time) and notify controller that 'circle' animation is finished.

What I do now, I would create directive for circle progress, and observe some attributes to know when to start/stop animation. Then, when observed completed attribute changes to true, directive finishes currently executing circle, does some extra animation (fade out) and calls the the 'on-change' attribute to notify the controller.

For me it looks like I'm doing it too complicated. I need to observe many attributes 'when to start', 'when to stop', then extra attribute for the callback method.

Is it a common approach for such situations? Maybe I should try to do these things with animations? I face this problem all the time when I want to integrate some existing jquery UI features into the angular app.

P.S. I want this directive to be reusable in many different controllers.

Plunker example with 'stopping' animation and notifying controller

jonasnas
  • 3,540
  • 1
  • 23
  • 32

1 Answers1

1

I wouldn't put it in a controller, the directive is the correct place for DOM interactions. From what I understand of your issue you are needing to watch for changes in multiple areas on the page. You don't necessarily need to watch multiple variables for that. You can pass multiple variable names into the directive as attributes and then set the 

scope.$watch(attrs.MyVar, function () {
      //Do something 
      scope[attrs.MyFunc]();

});

like so.

tuckerjt07
  • 902
  • 1
  • 12
  • 31