Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Built in Angular JS Directives

Posted in Angular JS, Javascript

HTML 5 provides flexibility to create custom tags and attributes. Angular use the same HTML 5 concept to provide additional functionality using these custom tags and attributes. Angular JS has built in directives listed as below.

  • ng-app: Declares the root element of an Angular JS application, under which directives can be used to declare bindings and define behavior.
  • ng-bind: Sets the text of a DOM element to the value of an expression. For example, <span ng-bind=”name”></span> will display the value of ‘name’ inside the span element. Any changes to the variable ‘name’ in the application’s scope are reflected instantly in the DOM.
  • ng-model: Establishes a two-way data binding between the view and the scope. Mostly used with form controls such as Textbox, select dropdown, checkbox, radio button etc.
  • ng-class: Allows class attributes to be dynamically loaded.

     <div ng-class="{'classname': expression}"> ... >/div> 
  • ng-controller: Specifies a JavaScript controller that evaluates HTML expressions.
  • ng-show & ng-hide: Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style.
  • ng-switch: Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.
  • ng-view: The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
  • ng-if: Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted.
  • ng-disabled: Add HTML 5 “disabled” attribute based on the condition to disable any HTML element.
  • ng-options: The ng-options directive fills a <select> element with <options>.