AngularJS - Directives

AngularJS has the inbuilt directives. The new directives can also be added using modules.

Inbuilt Directives:

AngularJS has many inbuilt directives. Few of them are listed below: 

• The ng-app directive defines the root element of an AngularJS application. The ng-app directive will auto-bootstrap (automatically initialise) the application when a web page is loaded.

• The ng-init directive defines initial values for an AngularJS application. This directive is not used normally, instead controller or module is being used for initialising values.

• The ng-model directive binds the value of HTML controls (input, select, textarea) to application data (variable created in AngularJS). It can also
• Provide type validation for application data (number, email, required).
• Provide status for application data (invalid, dirty, touched, error).
•  Provide CSS classes for HTML elements.
• Bind HTML elements to HTML forms

• The ng-repeat directive is perfect for displaying tables.

• The ng-option directive is used for creating select boxes. You can also use ng-repeat to create the same. Drop-downs made with ng-option allows the selected value to be an object, while drop-downs made from ng-repeat has to be a string.

• The ng-hide and ng-show directives control the visibility of the HTML element.

• Please refer AngularJS official site for the complete listof the existing AngularJS directive.

Creating new Directives:

• The new directives are being created by calling the .directive function.
• While naming the directives you must use the camel case and for invoking it you must use – separated name. 
• The directive can be invoked by using
• Element name
• Attribute
• Class
• Comment
• You can put restrict your directives to only be invoked by some of the methods. The legal restrict values are:
• E for Element name
• A for Attribute
• C for Class
• M for Comment
• By default the value is EA, meaning that both Element names and attribute names can invoke the directive.