डाउनलोड पी.डी.एफ. ई-बुक्स
AJS - Directives

AngularJS में Directives ये HTML के Elements के लिए Attributes होते है |
जैसे HTML में Element के लिए id, class या style ये attributes होते है |

AngularJS Directives ये HTML को विस्तृत करके और भी कार्यक्षमता प्रदान करता है |

निचे AngularJS Directives को दिया गया है |

  1. ng-app : ये directive AngularJS Application को define करता है |
  2. ng-model : ये directive Application data पर form elements(input, textarea, select) को bind करता है |
  3. ng-bind : ये directive application variable पर <p> element के innerHTML को bind करता है |

Example for Directives in AngularJS

Source Code :
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app = "" ng-init = "fruits = ['Orange','Mango','Banana','PineApple']">   
 Enter Name: <input type = "text" ng-model = "name"><br />  
 Hiii ! <span ng-bind = "name.toUpperCase()"></span><br />

  <ol>  
   <li ng-repeat = "f in fruits">
   {{ "fruit : " + f }}
   </li>  
  </ol>  
 </div>

</body>
</html>  
Output :
Enter Name:
Hiii !
  1. {{ "fruit : " + f }}

User-Defined Directive in AngularJS

Page के Left side पर सभी Built-In Directives दी गयी है , लेकिन AngularJS में User-Defined Directives भी create की जाती है |

Directive को create किया जाता तब तब उसका इस्तेमाल Element या Element के Attibute के रूप में भी किया जाता है |

User-Defined Directive create करने के लिए 'directive()' function का इस्तेमाल किया जाता है |

अगर camelCase में Directive define की जाती है तब उस element को add करने के लिए हर Uppercase letter से पहले '-'(hyphen) दिया जाता है |

User-Defined Directive ये case-sensitive होती है और Directive define करते वक्त उसका पहला character lowercase में दिया जाता है |

Source Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>

<div ng-app="app">
<div my-Directive></div>
<my-Directive></my-Directive>
</div>

<script>
var myapp = angular.module("app", []);
myapp.directive("myDirective", function() {
    return {template : "Hello World" };
});
</script>

</body>
</html>
Output :
Hello World
Hello World

AngularJS के सभी Directives को left side पर दिए गए है |