Directive gives html new functionality. Angular parses html, it looks for directives and take action. for example for ngClick it will register click event on that dom object. There are four way to write directive and not all directive support all four way
<ng-form/> tag
<div ng-click> attribute
<div class="ng-form"/> class
html comment
Event Directive
These respond to the specific event and let you call a method on your scope.
ngClick
ngDblClick
ngMousedown
ngMouseenter
ngMousemove
ngMouseover
ngMouseup
ngChange require ng-model to be present
OtherDirective
ngApp = designates the root element of the application
ngBind
ngBindTemplate - can use template and use multiple items
ngBindHtml - depends on ngSanitize module, may remove anything unsafe
ngBindHtmlUnsafe -
ngHide
ngShow
ngCloak - It will hide html element until angular processes all the directives and document is ready to be displayed. It is specially helpful on slow m/c. This avoid flash of unbound html. Look for css rule from the documentation
ngStyle
ngClass
ngClassEven repeat directive
ngClassOld
Thease are specially helpful in case browser doesn't it
ngDisabled
ngChecked
ngMultiple
ngReadonly
ngSelect
ngForm - It allow nested form
ngSubmit
ngHref - This will be used with anchor tag, it will not add this attribute to the element until angular has chance to process it.
ngScr - this allows to bind an image source. This delays binding untile angular replaces source of the image
ngNonBindable - angular doesn't parse text in that
Expression
Angular expressions are JavaScript-like code snippets which you can add to html. For example {{2*2}} will get display as 4. It doesn't support all javascript syntax
Filters
Filters are used to modify Output before it's rendered by the browser. Its used for formatting, Sorting dataset and Filtering dataset.
{{ expressiob | filter }}
uppercase
lowercase
number {{123.123 | number : 2}}
currency {{123.123 | currency}}
date {{<JS date> | date: 'mediumDate'}}
json can be used to print json object
orderBy used with ng-repeat
ng-repeat="employee in oemployees | orderBy:name"
limitTo
filter
ng-repeat="employee in oemployees | orderBy:name |limitTo: 3 | filter: {claim: {patientAccountNumber: ''}}"
Validation
You can use build in directive (ng-required="true" ng-pattern="onlyNumbers") to do validations. There are few form properties which you can use for styling example - Dirty, invalid, Pristine (exact opposite of dirty), valid (which is the exact opposite of invalid). Angular sets css class on input field to indicate what state those fields are.
<ng-form/> tag
<div ng-click> attribute
<div class="ng-form"/> class
html comment
Event Directive
These respond to the specific event and let you call a method on your scope.
ngClick
ngDblClick
ngMousedown
ngMouseenter
ngMousemove
ngMouseover
ngMouseup
ngChange require ng-model to be present
OtherDirective
ngApp = designates the root element of the application
ngBind
ngBindTemplate - can use template and use multiple items
ngBindHtml - depends on ngSanitize module, may remove anything unsafe
ngBindHtmlUnsafe -
ngHide
ngShow
ngCloak - It will hide html element until angular processes all the directives and document is ready to be displayed. It is specially helpful on slow m/c. This avoid flash of unbound html. Look for css rule from the documentation
ngStyle
ngClass
ngClassEven repeat directive
ngClassOld
Thease are specially helpful in case browser doesn't it
ngDisabled
ngChecked
ngMultiple
ngReadonly
ngSelect
ngForm - It allow nested form
ngSubmit
ngHref - This will be used with anchor tag, it will not add this attribute to the element until angular has chance to process it.
ngScr - this allows to bind an image source. This delays binding untile angular replaces source of the image
ngNonBindable - angular doesn't parse text in that
Expression
Angular expressions are JavaScript-like code snippets which you can add to html. For example {{2*2}} will get display as 4. It doesn't support all javascript syntax
Filters
Filters are used to modify Output before it's rendered by the browser. Its used for formatting, Sorting dataset and Filtering dataset.
{{ expressiob | filter }}
uppercase
lowercase
number {{123.123 | number : 2}}
currency {{123.123 | currency}}
date {{<JS date> | date: 'mediumDate'}}
json can be used to print json object
orderBy used with ng-repeat
ng-repeat="employee in oemployees | orderBy:name"
limitTo
filter
ng-repeat="employee in oemployees | orderBy:name |limitTo: 3 | filter: {claim: {patientAccountNumber: ''}}"
Validation
You can use build in directive (ng-required="true" ng-pattern="onlyNumbers") to do validations. There are few form properties which you can use for styling example - Dirty, invalid, Pristine (exact opposite of dirty), valid (which is the exact opposite of invalid). Angular sets css class on input field to indicate what state those fields are.
