Directives are markers on DOM elements that tell the AngularJS compiler to attach certain behaviors to the element or even replace the element. There are predefined directives like ng-app and ng-model as well as custom directives that can be created. Directives add behaviors, bind data to scopes, and replace or extend HTML elements. Common directives include ng-click, ng-disabled, ng-show, and ng-hide, which perform operations on clicks, disable elements conditionally, and show/hide elements based on conditions.

1. Directives

2. What are Directives?
Directive is a unique and powerful feature available in angular.
❖Markers on a DOM element
❖AngularJS comes with a set of predefined directives
❖Developers can create a custom directives

3. Why Directives?
❖Tells the compiler to attach a specified behaviour to the DOM element
● Adds Behaviours
● Data Binding to scope
● Replace (or) extend the HTML element

4. How To Use Directives:
Basic Directives:
ng-app
ng-model
ng-bind
ng-controller
ng-init

5. DOM Directives
ng-click : performs operation on element click
ng-disabled : disables the element by condition
ng-show : shows element based on condition
ng-hide : hides element based on condition
Example:
https://jsfiddle.net/mwL8c2e4/1/