AngularJS: directives vs. controllers - What logic to put where? [closed]

Question

I'm quite new to angular and try to really learn how to organize my code, so future coworkers will be able to find their way around it quickly.

One rule I know is "If it manipulates the DOM, put it into a directive", which I abide by.

But still there are times where I am unsure where to put my methods, as I can put them into the main app controller, into a controller supplied as the "controller" option within the directive or even within the function that inits the directive (option "link").

With filters and services it's pretty clear to me, but with controllers and directives the line becomes pretty blurry. I already realized that even with a little app I spread some of the code here and there and it's already confusing, even to myself. So I'd like to get some Tipps on organizing my code better.

So I guess my main question is:
1) Is there a good rule of thumb to know what code to put where?

Or if this is too abstract here are some examples:
2) I have a directive with a template which I only use within my app. Something should happen, when I click on the element. I already know its preferable to use the ng-click directive over binding a click event within the linked function.
But where should I define the method supplied in ng-click?

• A) The main controller of the app.
• B) The "link" function of the directive.
• C) Add a controller to the directive (using the "controller" option) and define it there.

3) Would the answer to 2) be different if I plan to reuse the directive elsewhere?

4) Different Scenario:
I have a Button and when clicked and dragged it should move a completely unrelated Element.
Should I...

• A) Create one directive and influence template & behavior based on a passed attribute?
• B) Create two directives (one for the handle, one for the target Element)
  If so, it again poses the question of where to put the methods to handle the dragging?

Notes:
I am aware the answers might be a little dependent on personal opinion, but I kinda hope there are some "rules" or "right ways to do it" to which I can abide by for future development. I didn't include any code for conciseness reasons. Should it be needed for an answer I'd be happy to provide it.

thank you for your time.

Answer 1

First of all, great question. I think every new-with-angular developer struggles with the differences with all the given components (controller, directive, service, filter etc.).

Let's start with the basic formal definition:

Directives are markers on a DOM element that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element.

And on the other hand

Controller is a JavaScript constructor function that is used to augment the Angular Scope

The defined behavior does guide us through some rule-of-thumbs.

So for your questions above:

1. In simple words, we user controllers to manage an area (scope) in The HTML template with all the great abilities a controller brings (two-way-binding, scoped behavior, services injections etc.) And we Use directives when we wish to manipulate an existing HTML element or Custom out own, in most scenarios - when we think about reusing This elements.
2. That depends on the context of what ng-click should do. Lets say you have your customized directive for a numeric input that has a customized designed and behavior as you defined in your directive configuration. And you use it in a form that ng-click suppose to pop a modal with optional values and use it in a different place in the application and ng-click will do something else. In this case the function need to be a scope.fucntion. but let's say both location and every other will do exactly the same, this take the function to the directive scope.
3. Answered above :)
4. Each of your options will do, this where "opinion" takes in and less rule-of-thumbs exists. why? because both ways will work when each has it pros and cons. The rule of thumb I can find in the scenario is that if both elements are part of the directive template, I would expect the 'behavious' (the dragging function) to be part of the directive scope.

Good luck