AngularJS - Tutorial

Custom Directives
Day #3

BY
George

Agenda
Possible way to Call Directives
Directive Types
Element directives
Attribute directives
CSS class directives
Comment directives

Possible way to Call Directives

AngularJS even gives you other options for invoking directives with different name
prefixes

These are all equivalent, as well:

ng-*
ng:*
ng_*
x-ng-*
data-ng-*

 To invoke a directive from HTML, we

simply can apply the directive in the DOM.
That is to say, we pick one of the four
methods for invoking a directive:

As an attribute
An attribute directive is activated when
AngularJS finds a matching HTML
element attribute

As a class
A CSS class directive is activated when
AngularJS finds a matching CSS Class

As an element
An element directive is activated when
AngularJS finds a matching HTML
element in the HTML template

As a comment
A comment directive is activated when
AngularJS finds a matching HTML
comment.

first, basic directive

Call to the directive() function on the module

When you call this function you can register a new directive.

Restrict option

There are four different ways to invoke a directive, so there are four valid options for restrict:

The restrict option can specify multiple options

Template

This template is an inline template where we are specifying the html that will be
appended

This is particularly useful when we want to share directives across apps and you only
want to pass a single file around.

TemplateUrl
If you prefer to load a template over ajax, you
can specify the templateUrl option, which will
use ajax to pull the template.

compile & link function

compile function is called only once when the directive is initilaized

link function is acitve always - whenever the scope changes the link
function is refreshed

compile function is run and is expected to return a link() function

The $compile() function will return a linking function that wraps all of
the containing DOM elements directives' linking functions.

Well use the link function to register all listeners on a specific DOM
element

Why have a compile and link function?

The answer is for performance

Its slow to compile and interpolate against
scopes every time a new directive of the
same type is created

Require option

Well enforce that we need this dependency by setting the require option:

Now, if we invoke the directive on the page without the ng-model directive, our browser will complain
and throw an error. To invoke our directive now, we simply have to add the ng-model directive:

Notice, in the require option, we prefixed the controller with a ^. AngularJS gives you two options in the
require option about how to declare requirements with a prefixed character:

Scope

Just like in every other part of AngularJS DOM control, directives can be given their
own scopes.

AngularJS gives you the ability to isolate the scope of the directive from the rest of
the page using the scope option.

The scope option can take one of two different options. It can be set to true (its
false by default).

Scope : False ( Directive uses its parent scope )

When scope is set to false, the controller Ctrl1 and directive are using the same
scope object. This means any changes to the controller or directive will be in sync.

fiddle : http://jsfiddle.net/shidhincr/eyNYw/4/light/

Scope : True ( Directive gets a new scope )

When scope is set to true, AngularJS will create a new scope by inheriting parent scope

fiddle : http://jsfiddle.net/shidhincr/q3kex/3/light/

Scope : { } ( Directive gets a new isolated scope )

This time, there will be a new scope created for the directive, but it will not be inherited
from the parent scope. This new scope also known as Isolated scope because it is
completely detached from its parent scope.

fiddle: http://jsfiddle.net/shidhincr/q3kex/4/light/

Isolated scope with Data

binding

can we pass some values from the parent scope to the directives now?

Yes ! Not only that, we might need to handle situations like invoking callbacks in parent
scope, two-way binding between parent & directives scope ..etc

fiddle : http://jsfiddle.net/shidhincr/pJLT8/10/light/

Scope Data binding

Local scope property(One-way-binding)

Binding a local scope (string) to the value of the DOM attribute

Bi-directional binding

Parent execution binding(call function from parent controller)

Scope Data binding

Directive Controller

Transclude option

http://jsfiddle.net/anglee/StnqM/

Replace option
replace: true means that the content of
the directive template will replace the
element that the directive is declared
on.
When replace: true, the template or
templateUrl must be required.
http://jsfiddle.net/cw773/

Assigenments