Understanding AngularJS Directives

What are AngularJS Directives?

Directives are special markers in AngularJS that allow you to attach specific behaviors to DOM elements. They can also modify or transform the DOM elements and their children. In essence, directives extend the functionality of HTML.

Most AngularJS directives start with ng-, where ng stands for Angular. AngularJS includes a variety of built-in directives, and developers can also create custom directives tailored to their applications.

Built-in AngularJS Directives

The following table outlines some of the key built-in directives in AngularJS:

Directive	Description
ng-app	Initializes an AngularJS application.
ng-init	Initializes variables in AngularJS.
ng-model	Binds the value of an HTML control to a property in the $scope object.
ng-controller	Attaches a controller to a specific view.
ng-bind	Replaces the content of an HTML element with the value of an AngularJS expression.
ng-repeat	Repeats an HTML template for each item in a specified collection.
ng-show	Displays an HTML element based on an expression.
ng-readonly	Makes an HTML element read-only based on an expression.
ng-disabled	Disables an HTML element if an expression evaluates to true.
ng-if	Adds or removes an HTML element based on an expression.
ng-click	Defines custom behavior when an element is clicked.

---

Detailed Explanation of Common Directives

ng-app

The ng-app directive initializes AngularJS and designates the root element of an application.

Example:

<div ng-app>
    <p>AngularJS Application Initialized!</p>
</div>

---

ng-init

The ng-init directive initializes variables in AngularJS.

Example:

<div ng-app ng-init="amount=100; person={firstName:'Steve', lastName:'Jobs'}">
    Amount: {{amount}} <br />
    Name: {{person.firstName}} {{person.lastName}}
</div>

---

ng-model

The ng-model directive is used for two-way data binding. It binds <input>, <select>, or <textarea> elements to a specified property in the $scope object.

Example:

<input type="text" ng-model="test" />
<div>Hello {{test}}</div>

In AngularJS:

var test = $scope.test;

---

ng-bind

The ng-bind directive replaces the content of an HTML element with the value of a variable or expression.

Example:

Enter your name: <input type="text" ng-model="name" /><br />
Hello <span ng-bind="name"></span>

---

ng-repeat

The ng-repeat directive iterates over an array collection and repeats HTML elements for each item.

Example:

<div ng-controller="PagingController">
    <table class="table">
        <tr ng-repeat="row in data">
            <td>{{row.name}}</td>
            <td>{{row.id}}</td>
        </tr>
    </table>
</div>

---

ng-if

The ng-if directive conditionally creates or removes an HTML element based on an expression.

Example:

<p ng-if="isVisible">This paragraph is displayed only if isVisible is true.</p>

---

ng-readonly

The ng-readonly directive makes an input field read-only based on an expression.

Example:

<input type="text" ng-model="name" ng-readonly="isReadOnly" />

---

ng-disabled

The ng-disabled directive disables an input field if the specified expression evaluates to true.

Example:

<button ng-disabled="isDisabled">Submit</button>

---

ng-click

The ng-click directive specifies behavior when an element is clicked.

Example:

<div>
    <button ng-click="test()">Click Me</button>
</div>

---

Learn More

For a comprehensive list of built-in directives and their detailed explanations, visit the official AngularJS Documentation.

Thanks for reading!