Professional AngularJS

5 Directives

WHAT YOU WILL LEARN IN THIS CHAPTER:            

• What directives are and why they are so powerful
• The three classes of basic directives
• Directive objects and directive composition
• Scope manipulation with directives
• How to use transclude and compile

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER

You can find the wrox.com code downloads for this chapter at http://www.wrox.com/go/proangularjs on the Download Code tab.

WHAT IS A DIRECTIVE?

You may have noticed that the word directive has been used to describe AngularJS-specific HTML attributes, such as ngClick and ngBind. Directives are integral to how data binding works in practice: Scopes allow you to watch variables for changes using $watch and trigger a digest loop with $apply, but how can you use these functions to update your user interface (UI)? Directives provide an abstraction for precisely this purpose.

The built-in directives you’ve already seen, like ngClick, are just the tip of the iceberg. In this chapter, you’ll not only dive in to the internals of how built-in directives work, you’ll also learn to write your own sophisticated directives.

Understanding Directives

Fundamentally, a directive is a rule for defining how your UI interacts with data binding. In other words, a directive defines how the associated element interacts with its corresponding scope. You’ll experiment with this by writing a simple directive: your own implementation of the built-in ngClick directive. Fundamentally, the ngClick directive ...