AngularJS - Directive vs per Controller Code in 'special' cases

Question

I have a theoretical case here, well, for me is a practical case, this is what I am doing right now.

I have a SPA, with a lot of partials (3 atm), and I have a menu, that will go through different states, I am doing this to have a fluid feel to entire site, the menu element is at first a small animation, better like this:

The menu is an animation at first that does something on my root template
The menu transforms into an action button that you can press to enter the actual homepage(not quite, it still has some neat actions tied to it when you open it or press some buttons)
On the homepage the menu changes states again so it is a normal site menu.

I'm keeping the same element on all the pages for the experience to be fluid.

The menu changes classes, each class has it's on layers of animation and possible manipulation.

In this case, is it better to use a directive for the menu?

What I am wondering is this, If I make a directive out of it, could I change its state with a command from the controller inside the directive? Or should the logic be in the Directive (e.g. detect witch Controller is active and take the appropriate actions ?)

I have the impression that I put a lot of possibly dumb questions here on stackoverflow regarding these issues of mine :), but I really want to do things right, at the moment I do DOM manipulation for the menu from each controller on different click and other events, it works, but I think it is not properly maintainable, I have to alter things in three controllers (at this stage, maybe later there will be more) to make some changes to the look and feel.

A JSFiddle is out of the question, there is A LOT OF CODE.

Sergiu Paraschiv · Accepted Answer · 2013-09-07 11:26:19Z

2

A directive can share state with it's parent controller, so communication is not an issue. You can go with broadcasts if you need more decoupling (highly debatable fact though). But I would not use a directive unless if you reuse it in different places OR by separating it's logic you end up with more manageable/readable code. In other words my directives tend to be related with a single "concern", not a lot of little stuff. It's pretty common to have directives inside other directives and transclude the contents. I prefer doing DOM stuff in directives, where you have fine control of it with compile and link, so if I have a component that does a lot of heavy DOM stuff (event listeners, DOM manipulation) I tend to move the code in a directive. I also like that <my-foo-directive> tags pop out in templates and abstract/simplify them too.

answered Sep 7, 2013 at 11:26

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - Directive vs per Controller Code in 'special' cases

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related