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

AngularJS tutorial about First Directive

First Directive

Directives might just be the killer feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes.

Watch this lesson now

Directives can be very simple. These two lessons will get you started learning so that you can graduate to more complex directives.

AngularJS tutorial about Write Your First Directive

Write Your First Directive

Write your very first directive! This lesson will show you how to declare a directive, and start using the "link" function to modify the behavior of an HTML element.

Watch this lesson now

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.

AngularJS tutorial about Basic Behaviors

Basic Behaviors

Bring your directives to life with custom behaviours. This is the recommended way of interacting with the DOM in AngularJS. If you find yourself modifying the DOM inside of your controllers (bad), directive behaviours are your solution (awesome).

Watch this lesson now

Useful Behaviors

When you define a directive you get access to the attrs object by declaring it as a dependency in the link function. The attrs object will contain the normalized attributes and their corresponding values declared on the element which contains the directive in the html. So if you set a value on your directive attribute (myDirective="value"), you can access this value in your directive configuration by accessing attrs.myDirective, as this contains the value set in the html for myDirective.

Watch this lesson now

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!

AngularJS tutorial about Directive Restrictions

Directive Restrictions

By default AngularJS directives can be used with elements, attributes, classes, and comments. Many times we want to restrict it to one or more of those to control how a directive will be used. This lesson digs into how and why to use Directive restrictions.

Watch this lesson now

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.

AngularJS tutorial about Understanding Isolate Scope

Understanding Isolate Scope

By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

Watch this lesson now

By isolating scopes you are able to control how and when your directives will share state with controllers and other directives.

AngularJS tutorial about Isolate Scope "&"

Isolate Scope "&"

The "&" in your isolated scopes within your AngularJS application will allow you to invoke a method within the scope that your directive lives in.

Watch this lesson now

Isolate Scope "="

Perhaps the most useful of the isolate scope binding methods, this episode talks about the use of "=" for two way binding within your directives.

Watch this lesson now

Isolate Scope "@"

AngularJS isolate scopes can be a bit cryptic when you are first starting out. In this lesson, John looks at the attribute or "@" designator in your isolate scopes.

Watch this lesson now

Isolate Scope Review

A review of the three types of isolate scope binding methods in AngularJS. The "@" operator is used for reading an attribute, "=" is used for creating a bi-directional two way binding, and "&" is used to make a call on something a controller scope.

Watch this lesson now

$scope vs. scope

This episode is explaining the naming conventions behind for the arguments passed to the factory functions for controllers, directives, linking functions, etc., its implications in regard to Angular’s dependency injection, minification side effects on arguments, and how to prevent them.

Watch this lesson now

Putting it all together

With the basics of AngularJS directives in your tool belt, you are ready to build something a bit more interesting.

Build a Debug Directive

Explore some interesting techniques with AngularJS directives to create a debug directive using termination, priority, and the $compile service.

Watch this lesson now

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!

Joel is a software developer living in Fort Worth, Texas. He's passionate about home educating his 4 kids and all things technology. He's also keeps egghead.io up and running for your learning pleasure!

Go back to articles
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?