AngularJS

Directives

Why Directives?

heart of the framework

modularity

re-usability

self-contained

declarative, data-driven, and conversational

Declarative

Data Driven

based on the data structure

template definitions

scope, element, attributes

propagated and broadcast

model and data changes

Conversational

injectable definitions

element as jQuery object

synchronize with services

$emit and $broadcast

Getting Started

separate modules

reuse and dry

keyword 'directive'

configuration

link function

Naming

camelCase

snake-case

'data-' or 'x-'

Attach Styles

element

attributes

class name

HTML comment

Configurations

Priority

Terminal

Templating

Replace

Link and Compile

Scope

Controller

Require

Transclusion

Compile vs. Link

compile phase

linking phase

{ pre: compile, post: link }

Scope

scope = false

scope = true

scope = {}

@ read-only Access

= two-way binding

& method binding

Transclusion

translated-inclusion

tunnel for parent scope

child nodes

$transclude