Directives are a core AngularJS feature. From the framework directives you will use every day like ng-model or ng-repeat, to your own custom directives that allow you to extend the vocabulary of the browser, if you are learning AngularJS, you need to have a solid understanding of Directives.
Because directives are so important, we've recorded quite a few lessons on the topic. If you've got a couple of hours to spare, you will be well on your way to directive mastery.
If you are just starting out, you might want to read New to AngularJS? Start learning here.
Writing your first directive
lesson:angularjs-first-directive
Directives can be very simple. These two lessons will get you started learning so that you can graduate to more complex directives.
lesson:write-your-first-directive
Behaviors
Directives come in a couple of main flavors. The first is "behavior" style directives. These directives are attached to to HTML elements and provide some sort of augmented functionality.
lesson:angularjs-basic-behaviors
lesson:angularjs-useful-behaviors
Directive restrictions
Directives can be restricted to DOM elements, attributes, CSS class names, or even comments. This is useful for defining the type of directive you are creating. A behavior directive will likely be an attribute or CSS class. No directive should ever use the comment style!
lesson:angularjs-directive-restrictions
Isolate Scope
Isolate scope can be a tough concept to understand when you are first starting out with AngularJS. Since directives are reusable, sharing $scope can create undesirable behavior with shared state.
lesson:angularjs-understanding-isolate-scope
By isolating scopes you are able to control how and when your directives will share state with controllers and other directives.
lesson:angularjs-isolate-scope-expression-binding
lesson:angularjs-isolate-scope-two-way-binding
lesson:angularjs-isolate-scope-attribute-binding
lesson:angularjs-isolate-scope-review
lesson:angularjs-scope-vs-scope
Putting it all together
With the basics of AngularJS directives in your tool belt, you are ready to build something a bit more interesting.
lesson:angularjs-build-a-debug-directive
What's next?
You are about half-way through the egghead.io directive lessons. Stay tuned for another guide that will get into more advanced topics such as transclusion and unit testing your directives!