Refinance now before rates go up! Get multiple rate quotes at GetMyLender.com.

AngularJS : Directive Components

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.
Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngView. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
What does it mean to "compile" an HTML template? For AngularJS, "compilation" means attaching event listeners to the HTML to make it interactive. The reason we use the term "compile" is that the recursive process of attaching directives mirrors the process of compiling source code in compiled programming languages.

Name Description
ngApp Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of 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.
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 The following markup will make the button enabled on Chrome/Firefox but not on IE8 and older IEs: <div ng-init="scope = { isDisabled: false }"> <button disabled="{{scope.isDisabled}}">Disabled</button> </div>
ngChecked The HTML specification does not require browsers to preserve the values of boolean attributes such as checked. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngChecked directive solves this problem for the checked attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.
ngReadonly The HTML specification does not require browsers to preserve the values of boolean attributes such as readonly. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngReadonly directive solves this problem for the readonly attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.
ngSelected The HTML specification does not require browsers to preserve the values of boolean attributes such as selected. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngSelected directive solves this problem for the selected attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.
ngOpen The HTML specification does not require browsers to preserve the values of boolean attributes such as open. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngOpen directive solves this problem for the open attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.
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 with angular data-binding. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.
ngModel The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope usingNgModelController, which is created and exposed by this directive.
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). The expression is not evaluated when the value change is coming from the model.
ngList Text input that converts between a delimited string and an array of strings. The delimiter can be a fixed string (by default a comma) or a regular expression.
ngValue Binds the given expression to the value of input[select] or input[radio], so that when the element is selected, thengModel of that element is set to the bound value.
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.
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 Creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way. By default, the innerHTML-ed 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.) You may also bypass sanitization for values you know are safe. To do so, bind to an explicitly trusted value via$sce.trustAsHtml. See the example under Strict Contextual Escaping (SCE).
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 with ngRepeatand take effect only on odd (even) rows.
ngClassEven The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction with ngRepeatand 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 Enables CSP (Content Security Policy) support.
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.
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.
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 ngShow attribute. 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 addangular-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 ngHide attribute. 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 addangular-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's templateUrl.
select HTML SELECT element with angular data-binding.

No comments:

Post a Comment