11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/

What are directives in angularJs with Example?

Mandates are JavaScript capacities that control and add practices to HTML DOM components. 
The four capacities are: aggregate, controller, pre-connection and post-Link. 
The aggregate capacity permits the mandate to control the DOM before it is incorporated and connected in this way permitting it to include/evacuate/change orders, and also, include/uproot/change other DOM components. 
The controller capacity encourages order correspondence. Kin and tyke mandates can ask for the controller of their kin and folks to impart data. 
The pre-join capacity takes into account private $scope control before the post-join process starts. 
The post-join strategy is the essential workhorse technique for the order.
In the mandate, post-gathering DOM control happens, occasion handlers are designed, as are watches and different things. In the statement of the order, the four capacities are characterized like this.
Directives definition of each in ng listed below:-

NameDescription
ngJq
Use this directive to force the angular.element library. This should be used to force either jqLite by leaving ng-jq blank or setting the name of the jquery variable under window (eg. jQuery).
ngApp
Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root elementof the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.
a
Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty.
ngHref
Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.
ngSrc
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
ngSrcset
Using Angular markup like {{hash}} in a srcset attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrcset directive solves this problem.
ngDisabled
This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy.
ngChecked
Sets the checked attribute on the element, if the expression inside ngChecked is truthy.
ngReadonly
Sets the readOnly attribute on the element, if the expression inside ngReadonly is truthy.
ngSelected
Sets the selected attribute on the element, if the expression inside ngSelected is truthy.
ngOpen
Sets the open attribute on the element, if the expression inside ngOpen is truthy.
ngForm
Nestable alias of form directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.
form
Directive that instantiates FormController.
textarea
HTML textarea element control with angular data-binding. The data-binding and validation properties of this element are exactly the same as those of the input element.
input
HTML input element control. When used together with ngModel, it provides data-binding, input state control, and validation. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.
ngValue
Binds the given expression to the value of <option> or input[radio], so that when the element is selected, thengModel of that element is set to the bound value.
ngBind
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
ngBindTemplate
The ngBindTemplate directive specifies that the element text content should be replaced with the interpolation of the template in the ngBindTemplate attribute. Unlike ngBind, the ngBindTemplate can contain multiple {{ }}expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.
ngBindHtml
Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.
ngChange
Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).
ngClass
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
ngClassOdd
The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction withngRepeat and take effect only on odd (even) rows.
ngClassEven
The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction withngRepeat and take effect only on odd (even) rows.
ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
ngController
The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.
ngCsp
Angular has some features that can break certain CSP (Content Security Policy) rules.
ngClick
The ngClick directive allows you to specify custom behavior when an element is clicked.
ngDblclick
The ngDblclick directive allows you to specify custom behavior on a dblclick event.
ngMousedown
The ngMousedown directive allows you to specify custom behavior on mousedown event.
ngMouseup
Specify custom behavior on mouseup event.
ngMouseover
Specify custom behavior on mouseover event.
ngMouseenter
Specify custom behavior on mouseenter event.
ngMouseleave
Specify custom behavior on mouseleave event.
ngMousemove
Specify custom behavior on mousemove event.
ngKeydown
Specify custom behavior on keydown event.
ngKeyup
Specify custom behavior on keyup event.
ngKeypress
Specify custom behavior on keypress event.
ngSubmit
Enables binding angular expressions to onsubmit events.
ngFocus
Specify custom behavior on focus event.
ngBlur
Specify custom behavior on blur event.
ngCopy
Specify custom behavior on copy event.
ngCut
Specify custom behavior on cut event.
ngPaste
Specify custom behavior on paste event.
ngIf
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
ngInclude
Fetches, compiles and includes an external HTML fragment.
ngInit
The ngInit directive allows you to evaluate an expression in the current scope.
ngList
Text input that converts between a delimited string and an array of strings. The default delimiter is a comma followed by a space - equivalent to ng-list=", ". You can specify a custom delimiter as the value of the ngListattribute - for example, ng-list=" | ".
ngModel
The ngModel directive binds an input,selecttextarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
ngModelOptions
Allows tuning how model updates are done. Using ngModelOptions you can specify a custom list of events that will trigger a model update and/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place.
ngNonBindable
The ngNonBindable directive tells Angular not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be Angular directives and bindings but which should be ignored by Angular. This could be the case if you have a site that displays snippets of code, for instance.
ngOptions
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select>element using the array or object obtained by evaluating the ngOptions comprehension expression.
ngPluralize
ngPluralize is a directive that displays messages according to en-US localization rules. These rules are bundled with angular.js, but can be overridden (see Angular i18n dev guide). You configure ngPluralize directive by specifying the mappings between plural categories and the strings to be displayed.
ngRepeat
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
ngShow
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShowattribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The.ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).
ngHide
The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHideattribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The.ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).
ngStyle
The ngStyle directive allows you to set CSS style on an HTML element conditionally.
ngSwitch
The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within ngSwitch but without ngSwitchWhen or ngSwitchDefault directives will be preserved at the location as specified in the template.
ngTransclude
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
script
Load the content of a <script> element into $templateCache, so that the template can be used by ngInclude,ngView, or directives. The type of the <script> element must be specified as text/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive'stemplateUrl.
select
HTML SELECT element with angular data-binding.
ngRequired
ngRequired adds the required validator to ngModel. It is most often used for input and select controls, but can also be applied to custom controls.
ngPattern
ngPattern adds the pattern validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.
ngMaxlength
ngMaxlength adds the maxlength validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.
ngMinlength
ngMinlength adds the minlength validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.
You have just read an article that categorized by title AngularJs by title What are directives in angularJs with Example? . You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/01/part-7what-are-directives-in-angularjs.html?hl=en. Thank You!
Author: Bikesh Srivastava - Wednesday, January 27, 2016

4 comments to "What are directives in angularJs with Example? "

  1. AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.
    Learn more about AngularJS:
    AngularJS Training in Chennai

    ReplyDelete
  2. I like your post very much. It is very useful for my research. I hope you can share more info about this. Keep posting mule 4 certification
    servicenow developer Certification
    Workday training
    Workday financial training
    Workday HCM Online training

    ReplyDelete

Life Is Complicated, But Now programmer Can Keep It Simple.