Stop Writing AngularJS Directives!
I see it time and time again. A new developer comes to Angular. She wants to, say, display a list of things and a button that sorts them. So she asks her fellow—more Angular savvy—colleagues how on earth to do that.
Write a directive, they say. Your logic will be encapsulated and reusable, they say.
Know what? Don’t. You heard me. Don’t write a directive.
If you do, hours of headache and desperate googling later, you’ll have some half-baked code that either depends directly on its parent controller’s state (there goes reusability and encapsulation), or you’l be completely at a loss about how to access anything in the directive’s isolated scope. And don’t even get me started on transclusions.
Directives in Angular are complicated, doubly so if you’re a newbie and you don’t know what you’re doing (and in Angular, that will take you a while). Oh and I should mention when you botch a directive, you usually won’t get errors in the console. Or you will but they’ll be weird Angular errors which you won’t understand. Most of the time, though, you will just get the scoping wrong and you won’t see any errors at all; your code will just happily not do what you want it to do.
Okay, so what should I do?
Don’t jump the gun.
You’d be surprised by how much you can achieve with controllers and directives baked into Angular. TodoMVC is written almost entirely using built-ins. Look at ng-model and filters. Learn how to use ng-repeat. They’re pretty powerful. If you need more, take a look at AngularUI or Ionic (if you’re writing a mobile app). And if you can’t find what you want there, use Google or DuckDuckGo or whatever your favorite search engine is because chances are someone has already written what you need.
And then—only then—sit down and write your own directive. That is, if you still want to. It may well turn out you don’t need to spend time making that particular piece of code reusable.
So save yourself the headache and think twice before you bang out your own directive.