Understanding scopes in AngularJS custom Directives

Read full article on the Infragistics blog

In this post we will learn about different kinds of scopes in AngularJS custom directives. First we’ll start with a high level introduction of directives and then focus on scopes.

Directives

Directives are one of the most important components of AngularJS 1.X, and have the following purposes:

1. Gives special meaning to the existing element
2. Creates a new element
3. Manipulates the DOM

Mainly, directives perform either of the following tasks:

Manipulate DOM

• Iterate through data
• Handle events
• Modify CSS
• Validate data
• Data Binding

Even though there are many built-in directives provided by the Angular team, there are times when you might need to create your own custom directives. A custom directive can be created either as an element, attribute, comment or class. In this post, a very simple custom directive can be created as shown in the listing below:

While creating custom directives, it’s important to remember:

• The directive name must be in the camel case;
• On the view, the directive can be used by separating the camel case name by using a dash, colon, underscore, or a combination of these.

Scopes in Custom Directives

Scopes enter the scene when we pass data to custom directives. There are three types of scopes:

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

Read full article on the Infragistics blog