AngularJS मे HTML DOM Elements के गुणों के लिए Binding Application Data के निर्देश है. DOM Document Object Model के लिए स्थिर है AngularJS Directives को HTML DOM Elements की विशेषताओ के लिए Application Data को Bind करने के लिए उपयोग मे लाया जाता है.
AngularJS मे सभी निर्देशों का उपयोग HTML DOM Elements के गुणों मे Application Data को Bind करने के लिए किया जाता है. Angularjs मे चार प्रकार के Directive का उपयोग Application Data को Bind करने के लिए किया जाता है.
ng-disabled Directive
ng-show Directive
ng-click Directive
ng-hide Directive
यह Directive AngularJS Application Data को HTML Elements के Disabled विशेषता मे बांधने के लिए उपयोग होती है.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>
इस Directive का उपयोग AngularJS मे एक HTML Elements को दिखाने या छुपाने मे किया जाता है.
<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>
यह Directive एक AngularJS Click Event को Represent करता है और कुल Click को HTML Element मानता है.
<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>
यह Directive एक HTML Element को छुपाता है या फिर दिखाता है.
<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "">
<table border = "0">
<tr>
<td>
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
<td>
<button ng-disabled = "enableDisableButton">Click Me!</button>
</td>
</tr>
<tr>
<td>
<input type = "checkbox" ng-model = "showHide1">Show Button</td>
<td>
<button ng-show = "showHide1">Click Me!</button>
</td>
</tr>
<tr>
<td>
<input type = "checkbox" ng-model = "showHide2">Hide Button</td>
<td>
<button ng-hide = "showHide2">Click Me!</button>
</td>
</tr>
<tr>
<td>
<p>Total click: {{ clickCounter }}</p>
</td>
<td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>
</td>
</tr>
</table>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>