Directives in AngularJS are, that get run when DOM is complied by the compiler. Directives are used to extend HTML and DOM element's behaviour and create reusable and testable code.These are attributes that starts with ng- prefix.
These are the following built in directives:
1. ng-app : It is used to set AngularJS section
syntax:
<div ng-app="myapp">
</div>
2. ng-init : It sets the default variable value.
syntax:
<div ng-init="employee={name:'Mona',email:'mona@gmail.com' }">
<div ng-bind="employee.name"></div>
<div ng-bind="employee.email"></div>
</div>
3. ng-bind : It is used to bind template
syntax:
<p ng-bind-template="{{name}} {{ email }}"></p>
4. ng-model : It is used to bind input elements with property model.
syntax:
<input type="text" ng-model="name">
<input type="text" ng-model="email">
5. ng-repeat : It is used for looping to show items in collection
syntax:
<ul>
<li ng-repeat="employee in employees">
<strong> Name: </strong> {{employee.name}}
<strong> Email: </strong> {{employee.email}}
</li>
</ul>
6. ng-class : It is used to set css class dynamically.
syntax:
<div ng-class="myCSS">{{ name }}</div>
7. ng-change : It is used to execute the expression when input change.
syntax:
<input type="text" ng-model="olderValue" ng-change="changedValue()" /></br>
Changed Value : {{ changedValue }}
8. ng-cloak : It is used to prevent displaying the content until AngularJS has taken control.
syntax:
<div ng-cloak="" ng-bind="name"></div>
9. ng-hide|show: It is used to show|hide the DOM element based on its expression.
syntax:
<div>
Show Div:
<div ng-show="showDiv">
<span></span> This div will show when showDiv is true.
</div>
</div>
<div>
Hide Div:
<div ng-hide="showDiv">
<span></span> This div will hide when showDiv is true.
</div>
</div>
10. ng-include : It is used to include external HTML fragment to our page.
syntax:
<div ng-app="">
<ng-include src="'htmlPage1.html'"></ng-include>
</div>
11. ng-checked : It is used to set checkbox value.
syntax:
<input type="checkbox" ng-checked="checked">
12. ng-if : It is used to check the expression to create or remove the element in DOM.
syntax:
<div ng-if="showDiv">
This div will show when showDiv is true
</div>
13. ng-switch : It is used to multiple conditions at same time and make one element visible based on expression.
syntax:
<div ng-switch on="pagenumber">
<div ng-switch-when="one">
<h1>Page One</h1>
</div>
<div ng-switch-when="two">
<h1>Page Two</h1>
</div>
<div ng-switch-default>
<h1>Page Default</h1>
</div>
</div>
14. ng-cut : It is used to specify custom behaviour on cut event.
syntax:
<input ng-cut="cut=true" ng-init="cut=false"; value='cut text from here'" ng-model="value">
<div ng-show='cut'>Text cut</div>
15. ng-copy : It is used to specify custom behaviour on copy event.
syntax:
<input ng-copy="copied=true" ng-init="copied=false"; value='copy this text'" ng-model="value">
<div ng-show='copied'>Text copied</div>
16. ng-paste : It is used to specify custom behaviour on paste event.
syntax:
<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
<div ng-show='paste'>Text pasted</div>
17. ng-open : It is used to set open attributes on the DOM element, if ng-open is true.
syntax:
Show All Elements: <input type="checkbox" ng-model="open">
<details ng-open="open">
<summary>Elements:</summary>
Element 1
Element 2
Element 3
</details>
18. ng-src : It is used to set path in src.
syntax:
url : <img src="{{ urlpath }}">
19. ng-style : It is used to set CSS style.
syntax:
<div ng-style="myStyle"> Style content </div>
20. ng-readonly : It is used to make DOM elements readonly.
syntax:
<input ng-model="name" ng-readonly="true"/>
21. ng-disabled : It is used to make DOM elements disabled.
syntax:
<input ng-model="name" ng-disabled="true"/>
22. ng-href : It is used to dynamically bind AngularJS variables to href.
syntax:
<a ng-href="{{url}}">click here!</a>
23. ng-list: It is used to show list items separated by comma or any other delimiter .
syntax:
<label>Employee List: <input ng-model="employee" ng-list required></label>
24. ng-mousedown: It is used to specify custom behaviour on mousedown event.
syntax:
<button ng-mousedown="count = count + 1" ng-init="count=0">
Click Me !!
</button>
count: {{count}}
25. ng-mouseenter : It is used to specify custom behaviour on mouseenter event.
syntax:
<button ng-mouseenter="count = count + 1" ng-init="count=0">
Click Me !!
</button>
count: {{count}}
26. ng-mouseleave : It is used to specify custom behaviour on mouseleave event.
syntax:
<button ng-mouseleave="count = count + 1" ng-init="count=0">
Click Me !!
</button>
count: {{count}}
27. ng-mousemove : It is used to specify custom behaviour on mousemove event.
syntax:
<button ng-mousemove="count = count + 1" ng-init="count=0">
Click Me !!
</button>
count: {{count}}
28. ng-mouseover : It is used to specify custom behaviour on mouseover event.
syntax:
<button ng-mouseover="count = count + 1" ng-init="count=0">
Click Me !!
</button>
count: {{count}}
29. ng-mouseup : It is used to specify custom behaviour on mouseup event.
syntax:
<button ng-mouseup="count = count + 1" ng-init="count=0">
Click Me !!
</button>
count: {{count}}
30. ng-submit : It is used to bind expressions on onsubmit events.
syntax:
<form ng-submit="submitFunction()">
</form>
31. ng-controller : It is used to attached controller class to view.
syntax:
<div ng-controller="controllerName">
...
</div>
32. ng-form : It is used to keep nested form.
syntax:
<div ng-form="formName"></div>
33. ng-selected : It is used to make selected option in select.
syntax:
<option ng-selected="selected">Selected Value</option>
34. ng-required : It is used to set input fields required.
syntax:
<input type="text" ng-model="model" ng-required="true" />
35. ng-pattern : It is used to validate input controls against specified pattern.
syntax:
<input type="text" ng-model="modelname" ng-pattern="pattern" />
36. ng-maxlength : It is used to add maxlength validator to ngModel.
syntax:
<input type="text" ng-model="modelname" ng-maxlength="10" />
37. ng-minlength : It is used to add minlength validator to ngModel.
syntax:
<input type="text" ng-model="modelname" ng-maxlength="5" />
38. ng-options : It is used to dynamically generate a list of <option> elements for <select> element.
syntax:
<select ng-model="selectedEmployee" ng-options="employee.name for employee in employees">
<option value="">-- select employee --</option>
</select>
0 Comment(s)