Explain the proper use of angularjs Directives in the given situation

From my understanding and use of angular so far, directives are for DOM manipulation and controllers are for, well controlling.

I know that directives are supposed to be generic and reusable and I am struggling to convert a mini wizard into directives and make it generic. Maybe being truly generic is too much to ask.

Basically its div, click button -> (some logic happens) -> fadeout.callBack(fadein new div) -> repeat again -> and on the last window click a button and return to original div.

Right now I accomplish this with nested jquery selectors using fadeOut/fadeIn.

It works well and I only want to break it out from the controller to maintain a "best practices" as much as possible.

The truly confusing point to me is it seems directives are at run time, constantly updated functions, when the fadeIn/Out functionality is really an onClick type thing.

Any advice would be helpful.

I agree with the above comments, especially that you could help elucidate things by providing an example. I'm not entirely sure what you mean that directives are at runtime. However, in lieu of an example, I have a couple of possible recommendations.

  1. Create a jquery plugin and try to use angular ui there is a jq directive which can handle many plugins
  2. angularui also has an animate directive that may suit you
  3. One technique that you'll see is that sometimes watchers or timeouts are used to check state as suggested by @mark-rajcok.

It seems to me that from what you've provided, this is a very solvable problem that has been solved. I would recommend pulling down the angularui and companion bootstrap code for ideas. Disclaimer: I've done work on the angularui project.