Dhananjay Kumar

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