Article

An Introduction to the AngularJS Directive [Part 1]

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!