Deep Dive into Custom Directives in AngularJS – Webinar recap

We recently held a webinar for the Indian region on May 29th titled “Deep dive Into Custom Directives in AngularJS”.

The presentation was attended by a good number of developers from the Indian region, and I covered a range of topics, including:

• Directives in AngularJS
• Create first custom directive
• Controller in custom directive
• Shared Scope
• Inherited Scope
• Isolated Scope

You can find a recording of the webinar here:

[youtube] width="560" height="315" src="http://www.youtube.com/embed/Ghex40XGdLY" [/youtube]

You can also find the presentation slides here.

Many questions were asked during the webinar, and while we tried to answer all of them, we may have missed some, so here are some of the important questions followed by our answers:

What are the scopes in AngularJS Directives?

There are three scopes:

1. Shared scope
2. Inherited scope
3. Isolated scope

How we pass data in an isolated scope?

Data can be passed in three possible ways:

1. Using the ‘@’ literal , string data can be passed
2. Using the ‘=’  literal, an object can be passed
3. Using the ‘&’ literal, an external function can be called.

What is the naming convention for AngularJS directives?

When we create custom AngularJS directives, names must be given in the camel case. So a custom directive can be created with the name myFirstDirective.

We can use the myFirstDirective custom directive either using the dash, underscore, or colon. It can be used as either of the following,

1. My-first-directive
2. My:first:directive
3. My_first_directive
4. My:first-direcrtve, etc.

Can we use custom directive as attributes of existing elements?

It depends on how the directive has been created. While creating the custom directive, by setting the value of restrict property, we can decide how the directive would be used. A directive can be used:

1. As an element – value of the restrict property is E
2. As an Attribute – value of the restrict property is A
3. As a comment –  value of the restrict property is C
4. As a class - value of the restrict property is M

We can also set multiple values for the restrict property. For example, if we want the directive to be used either as an element or attribute, then the value of the restrict property should be set to EA.

Once again, thank you so much for your interest in our webinars – and we look forward to seeing you at a future presentation!