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:

image

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

Advertisements

One thought on “Understanding scopes in AngularJS custom Directives

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s