AngularJS Directives

AngularJS Directives are one of the most powerful features of AngularJS, enabling developers to extend HTML functionality. Directives are special attributes or elements in HTML that AngularJS uses to enhance the behavior of the application.

Introduction to Directives

Directives allow you to:

• Bind data to HTML elements.
• Manipulate DOM elements dynamically.
• Extend HTML functionality by creating custom elements or attributes.

Built-in Directives vs Custom Directives

• Built-in Directives: Predefined by AngularJS, such as ng-app, ng-model, etc.
• Custom Directives: User-defined directives tailored to specific application needs.

Core AngularJS Directives

ng-app Directive

Defines the root element of an AngularJS application and initializes the app.

ng-init Directive

Executes expressions and initializes data.

ng-model Directive

Creates a two-way binding between the input field and the application data.

ng-repeat Directive

Repeats an element for each item in a collection.

ng-if Directive

Conditionally displays an element based on a boolean expression.

ng-show and ng-hide Directives

• ng-show: Displays an element when the condition is true.
• ng-hide: Hides an element when the condition is true.

ng-class Directive

Dynamically assigns classes to an element based on conditions.

ng-style Directive

Applies dynamic inline CSS styles to elements.

Form-related Directives

ng-submit Directive

Handles form submission and executes associated expressions.

ng-form Directive

Defines a form scope for better control and validation.

ng-disabled Directive

Disables form elements conditionally.

ng-checked Directive

Manages the checked state of checkboxes or radio buttons.

ng-readonly Directive

Makes an input field read-only based on a condition.

Event Directives

ng-click Directive

Executes a function or expression when an element is clicked.

ng-dblclick Directive

Handles double-click events.

ng-mouseover Directive

Executes expressions when the mouse pointer hovers over an element.

ng-mouseleave Directive

Triggers an action when the mouse pointer leaves an element.

ng-keyup Directive

Executes expressions on key-up events.

Custom Directives

Creating Custom Directives

Define a reusable behavior or component using the directive method in AngularJS.

Directive Scopes (Isolated Scope)

Control the data flow and behavior of a custom directive with isolated scope.

Directive Templates

Create reusable templates for your custom directive.

Directive Controller

Add functionality and logic to your directive using controllers.

 

Summary

AngularJS Directives allow developers to create dynamic, reusable, and interactive HTML elements. By combining built-in and custom directives, you can build powerful applications with extended HTML functionalities.