This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Directive Reference

1: ng-repeat
2: ARIA directives
3: Form directives
4: ng-app
5: ng-bind
6: ng-bind-html
7: ng-bind-template
8: ng-blur
9: ng-channel
10: ng-class
11: ng-click
12: ng-cloak
13: ng-copy
14: ng-cut
15: ng-dblclick
16: ng-el
17: ng-focus
18: ng-get
19: ng-hide
20: ng-if
21: ng-include
22: ng-inject
23: ng-keydown
24: ng-keyup
25: ng-load
26: ng-model
27: ng-model-options
28: ng-mousedown
29: ng-mouseenter
30: ng-mouseleave
31: ng-mousemove
32: ng-mouseout
33: ng-mouseover
34: ng-mouseup
35: ng-non-bindable
36: ng-pointer-capture
37: ng-post
38: ng-show
39: ng-sref
40: ng-sref-active
41: ng-state
42: ng-switch
43: ng-view
44: ng-window-* and ng-document-*

1 - ng-repeat

Complete reference for ng-repeat: iterating arrays and objects, track by, special scope variables, filters, multi-element repeat, and performance guidance.

ng-repeat instantiates a template for each item in a collection, creating a child scope for every element. It is the primary directive for rendering lists and grids in AngularTS.

Basic syntax

<li ng-repeat="item in items">{{ item.name }}</li>

<!-- Iterate an object (key-value pairs) -->
<tr ng-repeat="(key, value) in user">
  <td>{{ key }}</td><td>{{ value }}</td>
</tr>

`ng-repeat`

Type: expression
Required: yes

One of these forms:

item in collection — iterate array or array-like
(key, value) in object — iterate object properties
item in collection track by expression — with explicit tracking
item in collection | filter:fn — with inline filter

Special scope variables

Every ng-repeat child scope exposes these read-only properties:

`$index`

Type: number

Zero-based position of the item in the collection.

`$first`

Type: boolean

true for the first item ($index === 0).

`$last`

Type: boolean

true for the last item.

`$middle`

Type: boolean

true for items that are neither first nor last.

`$even`

Type: boolean

true when $index is even.

`$odd`

Type: boolean

true when $index is odd.

    ng-class="{ first: $first, last: $last, odd: $odd }">
  {{ $index + 1 }}. {{ item.name }}
</li>

track by

By default, ng-repeat tracks items by object identity. When the collection changes, it destroys and recreates DOM nodes for items that aren’t the same object reference. track by lets you specify a stable key, dramatically improving performance when data is re-fetched from a server.

<li ng-repeat="user in users track by user.id">{{ user.name }}</li>

<!-- Track by $index — useful for arrays of primitives -->
<li ng-repeat="tag in tags track by $index">{{ tag }}</li>

Warning: Do not use track by $index when items can be reordered or deleted — it causes incorrect DOM reuse. Use a stable unique ID instead.

Filtering and sorting

Apply filters inline in the ng-repeat expression:

<li ng-repeat="item in items | filter:searchText">{{ item.name }}</li>

<!-- Filter by object (matches any field) -->
<li ng-repeat="item in items | filter:{ category: 'books' }">{{ item.name }}</li>

<!-- Sort ascending -->
<li ng-repeat="item in items | orderBy:'name'">{{ item.name }}</li>

<!-- Sort descending -->
<li ng-repeat="item in items | orderBy:'-price'">{{ item.name }}</li>

<!-- Limit to first 10 -->
<li ng-repeat="item in items | limitTo:10">{{ item.name }}</li>

<!-- Chain filters -->
<li ng-repeat="item in items | filter:query | orderBy:'name' | limitTo:20">
  {{ item.name }}
</li>

Multi-element repeat

Use ng-repeat-start and ng-repeat-end to repeat a block of sibling elements (not just a single element):

<dd ng-repeat-end>{{ def.description }}</dd>

This produces alternating <dt> / <dd> pairs, one for each item in definitions.

Animating ng-repeat

ng-repeat integrates with $animate. Added items receive .ng-enter, removed items .ng-leave, and moved items .ng-move CSS classes:

  transition: opacity 0.3s;
  opacity: 0;
}
.my-list li.ng-enter-active {
  opacity: 1;
}
.my-list li.ng-leave {
  transition: opacity 0.3s;
  opacity: 1;
}
.my-list li.ng-leave-active {
  opacity: 0;
}

Performance guidance

Always use track by with a unique ID for large lists.
Avoid complex expressions in ng-repeat — compute derived values in the controller.
Use limitTo to paginate rather than rendering thousands of items.
One-time bind static content: {{ ::item.name }} avoids watches on items that never change.

2 - ARIA directives

This is covered by the ARIA provider, which documents all supported aria-* behavior and related configuration.

Use the provider page if you need details about global ARIA support and defaults.

3 - Form directives

API reference for form, ng-form, validation, and ng-messages directives.

AngularTS enhances native HTML forms with a form controller that tracks validity and user interaction state. The form and ng-form directives attach this controller to the scope, and the built-in validators populate it automatically.

form / ng-form

A plain <form> element with a name attribute creates a FormController on the current scope. ng-form does the same but can be used on non-form elements or for nested forms.

  <input name="email" ng-model="user.email" required type="email">
  <button type="submit" ng-disabled="registrationForm.$invalid">Register</button>
</form>

The name attribute (here registrationForm) is the scope property under which the controller is available.

FormController properties

`$valid`

Type: boolean

true when all child controls are valid.

`$invalid`

Type: boolean

true when any child control is invalid.

`$pristine`

Type: boolean

true until any control has been changed.

`$dirty`

Type: boolean

true after any control has been changed.

`$submitted`

Type: boolean

true after the form has been submitted at least once.

`$pending`

Type: object

Map of pending async validators. Empty object when none are pending.

`$error`

Type: object

Map of validator names to arrays of controls that are failing that validator. E.g., { required: [ctrl1], email: [ctrl2] }.

FormController methods

`$setPristine()`

Type: function

Resets the form and all controls to pristine state. Useful after a successful save.

`$setUntouched()`

Type: function

Resets the $touched state of all controls.

`$setSubmitted()`

Type: function

Marks the form as submitted programmatically.

Built-in validators

Apply validators as attributes on <input>, <textarea>, or <select> elements. When validation fails, the validator’s name appears in $error.

`required`

Type: none

The field must have a non-empty value. Alias: ng-required="expression" for conditional requirement.

`minlength`

Type: number

Minimum number of characters. Alias: ng-minlength="expression".

`maxlength`

Type: number

Maximum number of characters. Alias: ng-maxlength="expression".

`pattern`

Type: string

JavaScript regex pattern the value must match. Alias: ng-pattern="expression".

`min`

Type: number

Minimum value for type="number" or type="date" inputs.

`max`

Type: number

Maximum value for type="number" or type="date" inputs.

`type`

Type: string

HTML input type. AngularTS adds validators for email, url, number, date, time, week, month, datetime-local.

  <input name="username"
         ng-model="user.username"
         required
         minlength="3"
         maxlength="20"
         pattern="[a-zA-Z0-9_]+">

  <input name="age"
         ng-model="user.age"
         type="number"
         ng-min="18"
         ng-max="120">
</form>

ng-messages / ng-message

Display validation error messages tied to a field’s $error object.

  <div ng-message="required">Email is required.</div>
  <div ng-message="email">Please enter a valid email address.</div>
  <div ng-message-default>This field has an error.</div>
</div>

`ng-messages`

Type: expression
Required: yes

Expression pointing to an $error object (typically formName.fieldName.$error).

`ng-messages-multiple`

Type: none

By default, only the first matching message is shown. Add this attribute to show all matching messages simultaneously.

`ng-message`

Type: string
Required: yes

The validator key to match against the $error object. Shown when $error[key] is truthy.

`ng-message-exp`

Type: expression

Same as ng-message but evaluates an expression rather than a string literal.

`ng-message-default`

Type: none

Shown when no other ng-message matches. Useful as a generic fallback.

Complete form example

  <div>
    <label>Email</label>
    <input name="email" type="email" ng-model="user.email" required>
    <div ng-messages="signupForm.email.$error" ng-show="signupForm.email.$dirty">
      <div ng-message="required">Required.</div>
      <div ng-message="email">Invalid email format.</div>
    </div>
  </div>

  <div>
    <label>Password</label>
    <input name="password" type="password" ng-model="user.password"
           required minlength="8">
    <div ng-messages="signupForm.password.$error" ng-show="signupForm.password.$dirty">
      <div ng-message="required">Required.</div>
      <div ng-message="minlength">Must be at least 8 characters.</div>
    </div>
  </div>

  <button type="submit" ng-disabled="signupForm.$invalid">Sign Up</button>

</form>

4 - ng-app

Bootstrap AngularTS application

Description

Use this directive to auto-bootstrap an AngularTS application. The ng-app 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.

5 - ng-bind

Sync or hydrate textContent of element with an expression

Description

The ng-bind attribute places 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.

Typically, you don’t use ng-bind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferable to use ng-bind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before it is compiled. Since ng-bind is an element attribute, it makes the bindings invisible to the user while the page is loading.

An alternative solution to this problem would be using the ng-cloak directive.

ng-bind can be modified with a data-lazy data attribute (or shorthand lazy attribute), which will delay update of element content until model is changed. This is useful for rendering server-generated content, while keeping the UI dynamic. In other frameworks, this technieque is known as hydration.

Parameters

`ng-bind`

Type: Expression
Restrict: A
Element: ANY
Priority: 0
Description: Expression to evaluate and modify textContent property.
Example:
```
<div ng-bind="name"></div>
```

Directive modifiers

`data-lazy`

Type: N/A
Description: Apply expression once the bound model changes.

Example:

<div ng-bind="name" data-lazy></div>
<!-- or -->
<div ng-bind="name" lazy></div>

Demo

<section ng-app>
  <!-- Eager bind -->
  <label>Enter name: <input type="text" ng-model="name" /></label><br />
  Hello <span ng-bind="name">I am never displayed</span>!

  <!-- Lazy bind with short-hand `lazy` -->
  <button ng-click="name1 = name">Sync</button>
  <span ng-bind="name1" lazy>I am server content</span>!
</section>

Enter name:
Hello I am never displayed! I am server content!

6 - ng-bind-html

Bind trusted HTML content to an element.

Sets the innerHTML of an element to a trusted HTML string. The value must be explicitly trusted through the $sce service to prevent XSS.

  $scope.trustedHtml = $sce.trustAsHtml('<strong>Hello</strong> <em>world</em>');
});

`ng-bind-html`

Type: expression
Required: yes

Expression that evaluates to a value marked as trusted HTML via $sce.trustAsHtml(). Untrusted strings will throw an SCE error.

Warning: Never pass user-supplied content directly to $sce.trustAsHtml(). Only trust HTML you control or have saniti

7 - ng-bind-template

Bind interpolated template text to an element.

Binds a template string that may contain multiple {{ }} interpolation expressions. Useful on attributes or when you need mixed text and expressions in the element’s text content.

`ng-bind-template`

Type: string
Required: yes

A string literal containing one or more {{ expression }} interpolations. The entire string is interpolated and set as textContent.

8 - ng-blur

Handler for blur event

Description

The ng-blur directive allows you to specify custom behavior when an element loses focus.

Parameters

`ng-blur`

Type: Expression
Description: Expression to evaluate upon blur event. FocusEvent object is available as $event.

Example:

<div ng-blur="$ctrl.handleBlur($event)"></div>

Demo

<section ng-app>
  <input
    type="text"
    ng-blur="count++"
    ng-init="count = 0"
    placeholder="Click or tab away from me"
  />
  Lost focus {{ count }} times
</section>

Lost focus {{ count }} times

9 - ng-channel

Subscribe a template to a messaging service topic

Description

Updates element’s content by subscribing to events published on a named channel using $eventBus.

If the element does not contain any child elements or templates, the directive will replace the element’s inner HTML with the published value.
If the element does contain a template and the published value is an object, the directive will merge the object’s key-value pairs into the current scope, allowing Angular expressions like to be evaluated and rendered.

The directive automatically unsubscribes from the event channel when the scope is destroyed.

Parameters

`ng-channel`

Type: string
Description: The name of the channel to subscribe to using $eventBus.

Demo

<div ng-app>
  <!-- With empty node -->
  <div ng-channel="epoch"></div>

  <!-- With template -->
  <div ng-channel="user">Hello {{ user.firstName }} {{ user.lastName }}</div>
</div>

<button
  class="btn btn-dark"
  onclick="angular.$eventBus.publish('epoch', Date.now())"
>
  Publish epoch
</button>

<button
  class="btn btn-dark"
  onclick="
    angular.$eventBus.publish('user', {
      user: {
        firstName: 'John',
        lastName: 'Smith',
      },
    })
  "
>
  Publish name
</button>

Hello {{ user.firstName }} {{ user.lastName }}

10 - ng-class

Dynamically bind one or more CSS classes using expressions.

Description

The ng-class directive allows dynamically setting CSS classes on an HTML element by binding to an expression. The directive supports the following expression types:

String — space-delimited class names.
Object — keys as class names and values as booleans. Truthy values add the class.
Array — containing strings and/or objects as described above.

For complex view state, bind a precomputed class map instead of embedding a long object expression in the template:

<button ng-class="tile.classes"></button>

/**
 * @param {{ state: string, sunk: boolean }} tile
 * @returns {ng.ClassMap}
 */
function tileClasses(tile) {
  return {
    placed: tile.state === 'unit',
    hit: tile.state === 'hit',
    miss: tile.state === 'miss',
    sunk: tile.sunk,
  };
}

When the expression changes:

Previously added classes are removed.
New classes are added.
Duplicate classes are avoided.

Important: Avoid using interpolation ({{ ... }}) in the value of the class attribute together with ng-class. See interpolation known issues for details.

Animations

If data-animate attribute is present, the following animations will be applied to the element:

Animation	Occurs
`add-class`	Before the class is applied to the element
`remove-class`	Before the class is removed from the element
`set-class`	Before classes are simultaneously added and removed

ng-class supports standard CSS3 transitions/animations even if they don’t follow $animate service naming conventions.

Parameters

`ng-class`

Type: string | object | array
Type alias: ng.ClassValue
Description: An expression whose result determines the CSS classes to apply.

Example:

<div ng-class="{ active: isActive, disabled: isDisabled }"></div>

Demo

<style>
  .strike {
    text-decoration: line-through;
  }
  .bold {
    font-weight: bold !important;
  }
  .red {
    color: red;
  }
  .has-error {
    color: red;
    background-color: yellow;
  }
  .orange {
    color: orange;
  }
</style>
<section ng-app>
  <p ng-class="{strike: deleted, bold: important, 'has-error': error}">
    Map Syntax Example
  </p>
  <label>
    <input type="checkbox" ng-model="deleted" />deleted (apply "strike" class)
  </label>
  <br />
  <label>
    <input type="checkbox" ng-model="important" />important (apply "bold" class)
  </label>
  <br />
  <label>
    <input type="checkbox" ng-model="error" />error (apply "has-error" class)
  </label>
  <hr />
  <p ng-class="style">Using String Syntax</p>
  <input
    type="text"
    ng-model="style"
    placeholder="Type: bold strike red"
    aria-label="Type: bold strike red"
  />
  <hr />
  <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
  <input
    ng-model="style1"
    placeholder="Type: bold, strike or red"
    aria-label="Type: bold, strike or red"
  /><br />
  <input
    ng-model="style2"
    placeholder="Type: bold, strike or red"
    aria-label="Type: bold, strike or red 2"
  /><br />
  <input
    ng-model="style3"
    placeholder="Type: bold, strike or red"
    aria-label="Type: bold, strike or red 3"
  /><br />
  <hr />
  <p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
  <input
    ng-model="style4"
    placeholder="Type: bold, strike"
    aria-label="Type: bold, strike"
  />
  <br />
  <label
    ><input type="checkbox" ng-model="warning" /> warning (apply "orange"
    class)</label
  >
</section>

Map Syntax Example

deleted (apply "strike" class)
important (apply "bold" class)
error (apply "has-error" class)

Using String Syntax

Using Array Syntax

Using Array and Map Syntax

warning (apply "orange" class)

11 - ng-click

Handler for click event

Description

The ng-click directive allows you to specify custom behavior when an element is clicked.

Parameters

`ng-click`

Type: Expression
Restrict: A
Element: ANY
Priority: 0
Description: Expression to evaluate upon click event. PointerEvent object is available as $event.
Example:
```
<div ng-click="$ctrl.greet($event)"></div>
```
Event policy attributes can be added to the same element:
```
<button ng-click="$ctrl.submit($event)" data-event-prevent data-event-once>
  Submit
</button>
```
data-event-prevent, data-event-stop, data-event-capture, data-event-once, and data-event-passive apply to every event directive on the same element.

Demo

<section ng-app>
  <button class="btn btn-dark" ng-init="count = 0" ng-click="count++">
    Increment
  </button>
  <span> count: {{count}} </span>
</section>

count: {{count}}

12 - ng-cloak

Hide interpolated templates

Description

The ng-cloak directive is used to prevent the 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.

The directive can be applied to the <body> element, but the preferred usage is to apply multiple ng-cloak directives to small portions of the page to permit progressive rendering of the browser view.

ng-cloak works in cooperation with the following CSS rule:

@charset "UTF-8";

[ng-cloak],
[data-ng-cloak],
.ng-cloak,
.ng-hide:not(.ng-hide-animate) {
  display: none !important;
}

.ng-animate-shim {
  visibility: hidden;
}

.ng-anchor {
  position: absolute;
}

CSS styles are available in npm distribution:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/dist/angular.css"
/>

Example

<style>
  @charset "UTF-8";
  .ng-cloak,
  .ng-hide:not(.ng-hide-animate),
  [data-ng-cloak],
  [ng-cloak] {
    display: none !important;
  }
  .ng-animate-shim {
    visibility: hidden;
  }
  .ng-anchor {
    position: absolute;
  }
</style>
<section ng-app ng-cloak>These tags are invisible {{ hello }}</section>

Demo

These tags are invisible {{ hello }}

13 - ng-copy

Handler for copy event

Description

The ng-copy directive allows you to specify custom behavior when an element is copied.

Parameters

`ng-copy`

Type: Expression
Description: Expression to evaluate upon copy event. ClipboardEvent object is available as $event.

Example:

<div contenteditable="true" ng-copy="$ctrl.greet($event)">Content</div>

Demo

<section ng-app>
  <div class="border p-2" ng-copy="copied = true" contenteditable="true">
    Copy text from this box via Ctrl-C
  </div>
  {{ copied }}
</section>

Copy text from this box via Ctrl-C

14 - ng-cut

Handler for cut event

Description

The ng-cut directive allows you to specify custom behavior when an element is cut.

Parameters

`ng-cut`

Type: Expression
Description: Expression to evaluate upon cut event. ClipboardEvent object is available as $event.

Example:

<div contenteditable="true" ng-cut="$ctrl.onCut($event)">
  Cuttable content
</div>

Demo

<section ng-app>
  <div class="border p-2" ng-cut="cut = true" contenteditable="true">
    Cut text from this box via Ctrl-X
  </div>
  {{ cut }}
</section>

Cut text from this box via Ctrl-X

15 - ng-dblclick

Handler for dblclick event

Description

The ng-dblclick directive allows you to specify custom behavior when an element is double clicked.

Parameters

`ng-dblclick`

Type: Expression
Restrict: A
Element: ANY
Priority: 0
Description: Expression to evaluate upon dblclick event. MouseEvent object is available as $event.

Example:

<div ng-dblclick="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <button class="btn btn-dark" ng-init="count = 0" ng-dblclick="count++">
    Increment
  </button>
  <span> count: {{count}} </span>
</section>

count: {{count}}

16 - ng-el

Reference to an element

Description

The ng-el directive allows you to store a reference to a DOM element in the current scope, making it accessible elsewhere in your template or from your controller. The reference is automatically removed if the element is removed from the DOM.

Use ng-el for the common case where you want the native element itself:

<section ng-controller="BoardController as $ctrl">
  <canvas ng-el="$ctrl.boardEl"></canvas>
</section>

function BoardController() {
  this.boardEl = null;
}

Use a bare name for simple scope shorthand:

<canvas ng-el="boardEl"></canvas>

Use a full assignable expression for controller-as or object-path refs:

<canvas ng-el="$ctrl.boardEl"></canvas>
<section ng-el="refs.panel"></section>

For component or directive controller references, use ng-ref instead:

<search-box ng-ref="$ctrl.search"></search-box>

ng-ref-read is only a modifier for ng-ref. It is useful when you need an assignable expression and want to force a specific read target:

<canvas ng-ref="$ctrl.boardEl" ng-ref-read="$element"></canvas>

For simple DOM element references, ng-el is the clearer API.

Parameters

`ng-el`

Type: string (optional)
Description: Name of the key under which the element will be stored in scope, or an assignable expression such as $ctrl.boardEl. Bare names are treated as shorthand keys. If omitted, the element’s id attribute will be used.

Example:

<div ng-el="box"></div>
<div ng-el="$ctrl.box"></div>
<div id="box" ng-el></div>

Demo

<section ng-app>
  <div ng-el="$chesireCat"></div>
  <div ng-el id="response"></div>
  <button
    class="btn"
    ng-el="$button"
    ng-click="
      $chesireCat.innerHTML = '🐱';
      response.innerHTML='That depends a good deal on where you want to get to.';
      $button.hidden = true"
  >
    Which way I ought to go?
  </button>
</section>

17 - ng-focus

Handler for focus event

Description

The ng-focus directive allows you to specify custom behavior when an element is focused.

Parameters

`ng-focus`

Type: Expression
Description: Expression to evaluate upon focus event. FocusEvent object is available as $event.

Example:

<div ng-focus="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <input
    type="text"
    ng-focus="count++"
    ng-init="count = 0"
    placeholder="Click or tab into me"
  />
  Focused {{ count }} times
</section>

Focused {{ count }} times

18 - ng-get

Initiates a GET request

Description

The ng-get directive allows you to fetch content via $http service from a remote URL and insert, replace, or manipulate it into the DOM. For DOM manipulation to work, the response must be HTML content. If the server endpoint returns a JSON-response, the directive will treat it as an object to be merged into the current scope and the swap strategy will be ignored.

Example

<section>
  <div ng-get="/json">Get</div>
  <!-- Enpoint returns {name: 'Bob'}-->
  {{ name }}
  <!-- 'Bob' will be merged into current scope. -->
</section>

In case of error, the directive displays the error in place of success result or will merge it into the current scope if response contains JSON.

Example

<section>
  <div ng-post="/json">Get</div>
  <!-- Enpoint returns 404 with {error: 'Not found'}-->
  {{ error }}
  <!-- 'Not found' will be merged into current scope. Nothing to swap -->
</section>

Additional options for request and response handling can be modified with attributes provided below.

Parameters

`ng-get`

Type: string
Description: A URL to issue a GET request to
Example:
```
<div ng-get="/example">get</div>
```

Modifiers

`data-trigger`

Type: string
Description: Specifies the DOM event for triggering a request (default is click). For a complete list, see UI Events. To eagerly execute a request without user interaction, use the “load” event, which is triggered syntheticaly on any element by the directive linking function. This is in contract to the native load, which executes lazily only for window object and certain resource elements.

Example:

<div ng-get="/example" trigger="mouseover">Get</div>

`data-latch`

Type: string
Description: Triggers a request whenever its value changes. This attribute can be used with interpolation (e.g., {{ expression }}) to observe reactive changes in the scope.

Example:

<div ng-get="/example" latch="{{ latch }}" ng-mouseover="latch = !latch">
  Get
</div>

`data-swap`

Type: SwapMode
Description: Controls how the response is inserted

Example:

<div ng-get="/example" swap="outerHTML">Get</div>

`data-target`

Type: selectors
Description: Specifies a DOM element where the response should be rendered or name of scope property for response binding

Example:

<div ng-get="/example" target=".test">Get</div>
<div ng-get="/json" target="person">{{ person.name }}</div>

`data-delay`

Type: delay
Description: Delay request by N millisecond

Example:

<div ng-get="/example" delay="1000">Get</div>

`data-interval`

Type: delay
Description: Repeat request every N milliseconds

Example:

<div ng-get="/example" interval="1000">Get</div>

`data-throttle`

Type: delay
Description: Ignores subsequent requests for N milliseconds

Example:

<div ng-get="/example" throttle="1000">Get</div>

`data-loading`

Type: N/A
Description: Adds a data-loading=“true/false” flag during request lifecycle.

Example:

<div ng-get="/example" data-loading>Get</div>

`data-loading-class`

Type: string
Description: Toggles the specified class on the element while loading.

Example:

<div ng-get="/example" data-loading-class="red">Get</div>

`data-success`

Type: Expression
Description: Evaluates expression when request succeeds. Response data is available as a $res property on the scope.

Example:

<div ng-get="/example" success="message = $res">Get {{ message }}</div>

`data-error`

Type: Expression
Description: Evaluates expression when request fails. Response data is available as a $res property on the scope.

Example:

<div ng-get="/example" error="errormessage = $res">
  Get {{ errormessage }}
</div>

`data-success-state`

Type: string
Description: Name of the state to nagitate to when request succeeds

Example:

<ng-view></ng-view>
<div ng-get="/example" success-state="account">Get</div>

`data-success-error`

Type: string
Description: Name of the state to nagitate to when request fails

Example:

<ng-view></ng-view>
<div ng-get="/example" error-state="login">Get</div>

19 - ng-hide

Hide an element when an expression is truthy.

Toggles the CSS display property of an element without removing it from the DOM. The element’s scope is always alive, regardless of visibility.

<div ng-hide="isLoading">Content here</div>

`ng-show`

Type: expression
Required: yes

When truthy, the element is visible (removes the ng-hide CSS class). When falsy, the element is hidden.

`ng-hide`

Type: expression
Required: yes

Inverse of ng-show. When truthy, the element is hidden.

Animation hooks: .ng-hide-add / .ng-hide-add-active when hiding, .ng-hide-remove / .ng-hide-remove-active when showing.

ng-if vs ng-show/hide

Aspect	`ng-if`	`ng-show` / `ng-hide`
DOM presence	Removed when false	Always in DOM
Scope lifetime	Destroyed when false	Always alive
Child watchers	Removed when false	Always active
Initial render cost	Only when true	Always rendered
Animation events	`ng-enter` / `ng-leave`	`ng-hide-add` / `ng-hide-remove`

Use ng-if when the content is expensive to render or when you want to prevent hidden content from making network requests.
Use ng-show/hide when toggling frequently and you need instant re-display without re-initiali

20 - ng-if

Conditionally add or remove an element from the DOM.

Adds or removes an element from the DOM based on the truthiness of an expression. When the element is removed, its scope and all child scopes are destroyed. When re-added, a fresh scope is created.

  Welcome back, {{ user.name }}!
</div>

`ng-if`

Type: expression
Required: yes

When truthy, the element is rendered. When falsy, the element and its scope are destroyed and removed from the DOM.

Animation hooks: .ng-enter / .ng-enter-active when added, .ng-leave / .ng-leave-active when removed.

Note: ng-if creates a child scope. If you bind ng-model inside an ng-if, write to an object property (obj.field) rather than a primitive to avoid scope shadowing issues.

21 - ng-include

Include a template

Description

22 - ng-inject

Inject dependencies into scope.

Description

The ng-inject directive injects registered injectables (services, factories, etc.) into the current scope for direct access within templates or expressions. This allows access to application state without having to create intermediary controllers.

When applied to an element, the directive reads a semicolon-separated list of injectables’ names from the ng-inject attribute and attempts to retrieve them from the $injector. Each resolved injectable is attached to the current scope under its corresponding name.

Parameters

`ng-inject`

Type: string
Restrict: A
Description:
A semicolon-separated list of injectable’ names to attach to current scope.

Example:

<div ng-inject="userService;accountService"></div>

Demo

<section ng-app>
  <div ng-inject="$window"></div>
  {{ $window.document.location }}
</section>

23 - ng-keydown

Handler for keydown event

Description

The ng-keydown directive allows you to specify custom behavior when pressing keys, regardless of whether they produce a character value.

Parameters

`ng-keydown`

Type: Expression
Description: Expression to evaluate upon keydown event. KeyboardEvent object is available as $event.

Example:

<div ng-keydown="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <input
    type="text"
    ng-keydown="count++"
    ng-init="count = 0"
    placeholder="Click here, then press down a key."
  />
  Keydown {{ count }} times
</section>

Keydown {{ count }} times

24 - ng-keyup

Handler for keyup event

Description

The ng-keyup directive allows you to specify custom behavior when releasing keys, regardless of whether they produce a character value.

Parameters

`ng-keyup`

Type: Expression
Description: Expression to evaluate upon keyup event. KeyboardEvent object is available as $event.

Example:

<div ng-keyup="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <input
    type="text"
    ng-keyup="count++"
    ng-init="count = 0"
    placeholder="Click here, then press down a key."
  />
  Keyup {{ count }} times
</section>

Keyup {{ count }} times

25 - ng-load

Handler for load event

Description

The ng-load directive allows you to specify custom behavior for elements that trigger load event.

Note: there is no guarantee that the browser will bind ng-load directive before loading its resource. Demo below is using a large image to showcase itself.

Parameters

`ng-load`

Type: Expression
Description: Expression to evaluate upon load event. Event object is available as $event.

Example:

<img src="url" ng-load="$ctrl.load($event)"></div>

Demo

<section ng-app>
  <img
    ng-load="res = 'Large image loaded'"
    width="150px"
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Centroamerica_prehispanica_siglo_XVI.svg/1920px-Centroamerica_prehispanica_siglo_XVI.svg.png"
  />
  {{ res }}
</section>

26 - ng-model

Two-way data binding for form controls.

Binds the value of <input>, <textarea>, <select>, and custom controls to a scope expression.

<textarea ng-model="user.bio"></textarea>
<select ng-model="user.role" ng-options="r for r in roles"></select>
<input type="checkbox" ng-model="user.active">

`ng-model`

Type: expression
Required: yes

An assignable AngularTS expression. When the user changes the input, the expression is assigned the new value. When the scope value changes, the input is updated.

Model controller (`NgModelController`)

When ng-model is applied, AngularTS creates an NgModelController accessible as formName.fieldName on the scope. It exposes:

`$viewValue`

Type: any

The value as seen by the user in the input (always a string for text inputs).

`$modelValue`

Type: any

The value after parsers have run — what is stored on the scope.

`$valid`

Type: boolean

true when all validators pass.

`$invalid`

Type: boolean

true when any validator fails.

`$pristine`

Type: boolean

true until the user has interacted with this field.

`$dirty`

Type: boolean

true after the user has changed the value at least once.

`$touched`

Type: boolean

true after the field has received and lost focus.

`$error`

Type: object

Map of failing validator names to true. E.g., { required: true, minlength: true }.

Parsers and formatters

ng-model processes values through two pipelines:

Parsers ($parsers): Convert $viewValue → $modelValue. Applied on user input. Return undefined to mark invalid.
Formatters ($formatters): Convert $modelValue → $viewValue. Applied when scope value changes.

  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ngModel) {
      ngModel.$parsers.push(function(value) {
        var n = parseInt(value, 10);
        ngModel.$setValidity('integer', !isNaN(n));
        return isNaN(n) ? undefined : n;
      });
    }
  };
});

27 - ng-model-options

Configure update timing and validation behavior for ng-model.

Configures how and when ng-model reads and writes its value.

`updateOn`

Type: string

Space-separated list of DOM events that trigger a model update. Default is 'default' (uses the element’s natural update event). Common values: 'blur', 'change', 'keyup', 'default'.

<!-- Only update on blur -->
<input ng-model="name" ng-model-options="{ updateOn: 'blur' }">

<!-- Update on both blur and custom event -->
<input ng-model="name" ng-model-options="{ updateOn: 'blur myEvent' }">

`debounce`

Type: number | object

Milliseconds to wait after the last change before updating the model. Can be a number (applies to all events) or an object mapping event names to delays.

<!-- 300ms debounce for all events -->
<input ng-model="search" ng-model-options="{ debounce: 300 }">

<!-- Different debounce per event -->
<input ng-model="search" ng-model-options="{ debounce: { default: 300, blur: 0 } }">

`allowInvalid`

Type: boolean

When true, the model is updated even when validators fail. Default is false (model is set to undefined on invalid input).

`getterSetter`

Type: boolean

When true, the ng-model expression is treated as a getter/setter function rather than a plain property. The function is called with no arguments to get and with the new value to set.

$scope.getUser = function(newVal) {
  if (arguments.length) { _user = newVal; }
  return _user;
};

<input ng-model="getUser" ng-model-options="{ getterSetter: true }">

`time

28 - ng-mousedown

Handler for mousedown event

Description

The ng-mousedown directive allows you to specify custom behavior when a mouse is pressed over an element.

Parameters

`ng-mousedown`

Type: Expression
Description: Expression to evaluate upon mousedown event. MouseEvent object is available as $event.

Example:

<div ng-mousedown="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <button ng-init="count = 0" ng-mousedown="count++">Press Mouse Down</button>
  Mouse Down {{ count }} times
</section>

Mouse Down {{ count }} times

29 - ng-mouseenter

Handler for mouseenter event

Description

The ng-mouseenter directive allows you to specify custom behavior when a mouse enters an element.

Parameters

`ng-mouseenter`

Type: Expression
Description: Expression to evaluate upon mouseenter event. MouseEvent object is available as $event.

Example:

<div ng-mouseenter="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <div ng-init="count = 0" ng-mouseenter="count++">Mouse Enter</div>
  Mouse Enter {{ count }} times
</section>

Mouse Enter

Mouse Enter {{ count }} times

30 - ng-mouseleave

Handler for mouseleave event

Description

The ng-mouseleave directive allows you to specify custom behavior when an element a mouse leaves entire element.

Parameters

`ng-mouseleave`

Type: Expression
Description: Expression to evaluate upon mouseleave event. MouseEvent object is available as $event.

Example:

<div ng-mouseleave="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <div ng-init="count = 0" ng-mouseleave="count++">Mouse Leave</div>
  Mouse Leave {{ count }} times
</section>

Mouse Leave

Mouse Leave {{ count }} times

31 - ng-mousemove

Handler for mousemove event

Description

The ng-mousemove directive allows you to specify custom custom behavior when a mouse is moved over an element.

Parameters

`ng-mousemove`

Type: Expression
Description: Expression to evaluate upon mousemove event. MouseEvent object is available as $event.

Example:

<div ng-mousemove="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <div ng-init="count = 0" ng-mousemove="count++">Mouse Move</div>
  Mouse Move {{ count }} times
</section>

Mouse Move

Mouse Move {{ count }} times

32 - ng-mouseout

Handler for mouseout event

Description

The ng-mouseout directive allows you to specify custom behavior when a mouse leaves any part of the element or its children.

Parameters

`ng-mouseout`

Type: Expression
Description: Expression to evaluate upon mouseout event. MouseEvent object is available as $event.

Example:

<div ng-mouseout="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <div ng-init="count = 0" ng-mouseout="count++">Mouse Out</div>
  Mouse Out {{ count }} times
</section>

Mouse Out

Mouse Out {{ count }} times

33 - ng-mouseover

Handler for mouseover event

Description

The ng-mouseover directive allows you to specify custom behavior when a mouse is placed over an element.

Parameters

`ng-mouseover`

Type: Expression
Description: Expression to evaluate upon mouseover event. MouseEvent object is available as $event.

Example:

<div ng-mouseover="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <div ng-init="count = 0" ng-mouseover="count++">Mouse Over</div>
  Mouse Over {{ count }} times
</section>

Mouse Over

Mouse Over {{ count }} times

34 - ng-mouseup

Handler for mouseup event

Description

The ng-mouseup directive allows you to specify custom behavior when a pressed mouse is released over an element.

Parameters

`ng-mouseup`

Type: Expression
Description: Expression to evaluate upon mouseup event. MouseEvent object is available as $event.

Example:

<div ng-mouseup="$ctrl.greet($event)"></div>

Demo

<section ng-app>
  <div ng-init="count = 0" ng-mouseup="count++">Mouse Up</div>
  Mouse Up {{ count }} times
</section>

Mouse Up

Mouse Up {{ count }} times

35 - ng-non-bindable

Stops compilation for element

Description

The ng-non-bindable directive tells the framework not to compile or bind the contents of the current DOM element, including directives on the element itself that have a lower priority than ngNonBindable. This is useful if the element contains what appears to be directives and bindings but which should be ignored. This could be the case if you have a site that displays snippets of code, for instance.

`ng-non-bindable`

Type: N/A
Description: Stops compilation process for element
Priority: 1000
Element: ANY

Example:

<section ng-app>
    <div ng-non-bindable>{{ 2 + 2 }}</div>
  </section>

36 - ng-pointer-capture

Capture active pointer streams on an element

Description

The ng-pointer-capture directive captures a pointer stream that starts on the element and releases it when the pointer ends or is cancelled. This is useful for board, canvas, and game-style interfaces where pointermove and pointerup should continue reaching the same element even when the pointer leaves its bounds.

ng-pointer-capture does not implement dragging behavior. It only manages the browser pointer capture lifecycle. Use ng-on-pointerdown, ng-on-pointermove, ng-on-pointerup, and ng-on-pointercancel for your application logic.

Parameters

`ng-pointer-capture`

Type: boolean attribute
Restrict: A
Element: ANY
Priority: 1
Description: Calls setPointerCapture($event.pointerId) on pointerdown, releases capture on pointerup and pointercancel, forgets browser-released pointers on lostpointercapture, and releases active captures when the scope is destroyed.

Example:

<div
  ng-pointer-capture
  ng-on-pointerdown="$ctrl.startDrag($event)"
  ng-on-pointermove="$ctrl.drag($event)"
  ng-on-pointerup="$ctrl.drop($event)"
  ng-on-pointercancel="$ctrl.cancelDrag($event)"
  data-event-prevent
></div>

Demo

<style>
  .pointer-capture-demo {
    display: grid;
    gap: 0.75rem;
    max-width: 30rem;
  }

  .pointer-capture-demo__board {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    background:
      linear-gradient(90deg, rgba(14, 165, 233, 0.12) 1px, transparent 1px),
      linear-gradient(rgba(14, 165, 233, 0.12) 1px, transparent 1px), #f8fafc;
    background-size: 2rem 2rem;
    touch-action: none;
    user-select: none;
  }

  .pointer-capture-demo__marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.22);
    will-change: transform;
  }

  .pointer-capture-demo__status {
    margin: 0;
    color: #475569;
  }
</style>

<section ng-app="pointerCaptureDemo" class="pointer-capture-demo">
  <div ng-controller="PointerCaptureDemo as $ctrl">
    <div
      class="pointer-capture-demo__board"
      ng-pointer-capture
      ng-on-pointerdown="$ctrl.start($event)"
      ng-on-pointermove="$ctrl.move($event)"
      ng-on-pointerup="$ctrl.end($event)"
      ng-on-pointercancel="$ctrl.cancel()"
      data-event-prevent
    >
      <div
        class="pointer-capture-demo__marker"
        ng-style="$ctrl.markerStyle"
      ></div>
    </div>
    <p class="pointer-capture-demo__status">{{ $ctrl.status }}</p>
  </div>
</section>

<script>
  window.angular
    .module('pointerCaptureDemo', [])
    .controller('PointerCaptureDemo', function () {
      this.dragging = false;
      this.status = 'Drag the marker across the board';
      this.markerStyle = {
        transform: 'translate(32px, 32px)',
      };

      this.positionFromEvent = function (event) {
        const rect = event.currentTarget.getBoundingClientRect();
        const radius = 12;
        const x = Math.max(
          radius,
          Math.min(event.clientX - rect.left, rect.width - radius),
        );
        const y = Math.max(
          radius,
          Math.min(event.clientY - rect.top, rect.height - radius),
        );

        this.markerStyle = {
          transform:
            'translate(' + (x - radius) + 'px, ' + (y - radius) + 'px)',
        };
      };

      this.start = function (event) {
        this.dragging = true;
        this.status = 'Pointer captured';
        this.positionFromEvent(event);
      };

      this.move = function (event) {
        if (!this.dragging) {
          return;
        }

        this.status = 'Dragging pointer ' + event.pointerId;
        this.positionFromEvent(event);
      };

      this.end = function (event) {
        if (this.dragging) {
          this.positionFromEvent(event);
        }

        this.dragging = false;
        this.status = 'Pointer released';
      };

      this.cancel = function () {
        this.dragging = false;
        this.status = 'Pointer cancelled';
      };
    });
</script>

37 - ng-post

Initiates a POST request

Description

The ng-post directive allows you to send data via $http service to a remote URL and insert, replace, or manipulate the server’s response into the DOM. The directive assumes a response will be HTML content. If the server endpoint returns a JSON-response, the directive will treat it as an object to be merged into the current scope. In such a case, the swap strategy will be ignored and the content will be interpolated into current scope. Unlike its sister ng-get directive, ng-post assumes it is attached to a form, input, textarea, or select element, which act as the source of data for request payload:

Example

<form ng-post="/register">
  <input name="username" type="text" />
</form>

With form elements, the directive can be registered anywhere inside a form:

Example

<form>
  <input name="username" type="text" />
  <button ng-post="/register">Send</button>
</form>

In case of error, the directive displays the error in place of success result or will merge it into the current scope if response contains JSON. The behavior can be combined with other directivs to create complex form-handling strategies. Below is a form that dissappears in case of success or adds error state in case of validation errors.

Example

<form
  ng-post="/register"
  ng-if="$ctrl.success === false"
  success="$ctrl.success = true"
>
  <h2>Register form</h2>

  <label ng-class="{ error: errors.username }">
    Username
    <input
      name="username"
      type="text"
      aria-invalid="{{ errors.username !== undefined}}"
      ng-keyup="errors.username = undefined"
    />
    <span>{{ errors.username }}</span>
  </label>

  <button type="submit">Sign up</button>
</form>

For other input elements, the directive adds form-like behavior. The example below showcases an input acting as a search form:

<input
  name="seach"
  ng-post="/search"
  target="#output"
  trigger="keyup"
  placeholder="Search..."
/>

Additional options for request and response handling can be modified with attributes provided below.

Parameters

`ng-post`

Type: string
Description: A URL to issue a GET request to
Example:
```
<div ng-post="/example">post</div>
```

Modifiers

`data-enctype`

Type: string
Description: Specifies the content type of form. Defaults to application/json. To send regular URL-encoded data form, use application/x-www-form-urlencoded.

Example:

<form ng-post="/urlencoded" enctype="application/x-www-form-urlencoded">
  <input type="text" name="name" />
</form>

`data-form`

Type: string
Description: If placed outside a form element, specifies id of the form to use for datasource.

Example:

<button ng-post="/register" form="register">Send</button>
<form id="register">
  <input name="username" type="text" />
</form>

`data-trigger`

Type: string
Description: Specifies the DOM event for triggering a request (default is click). For a complete list, see UI Events. To eagerly execute a request without user interaction, use the “load” event, which is triggered syntheticaly on any element by the directive linking function. This is in contract to the native load, which executes lazily only for window object and certain resource elements.

Example:

<div ng-post="/example" trigger="mouseover">Get</div>

`data-latch`

Type: string
Description: Triggers a request whenever its value changes. This attribute can be used with interpolation (e.g., {{ expression }}) to observe reactive changes in the scope.

Example:

<div ng-post="/example" latch="{{ latch }}" ng-mouseover="latch = !latch">
  Get
</div>

`data-swap`

Type: SwapMode
Description: Controls how the response is inserted

Example:

<div ng-post="/example" swap="outerHTML">Get</div>

`data-target`

Type: selectors
Description: Specifies a DOM element where the response should be rendered or name of scope property for response binding

Example:

<div ng-post="/example" target=".test">Post</div>
<div ng-post="/json" target="person">{{ person.name }}</div>

`data-delay`

Type: delay
Description: Delay request by N millisecond

Example:

<div ng-post="/example" delay="1000">Get</div>

`data-interval`

Type: delay
Description: Repeat request every N milliseconds

Example:

<div ng-post="/example" interval="1000">Get</div>

`data-throttle`

Type: delay
Description: Ignores subsequent requests for N milliseconds

Example:

<div ng-post="/example" throttle="1000">Get</div>

`data-loading`

Type: N/A
Description: Adds a data-loading=“true/false” flag during request lifecycle.

Example:

<div ng-post="/example" data-loading>Get</div>

`data-loading-class`

Type: string
Description: Toggles the specified class on the element while loading.

Example:

<div ng-post="/example" data-loading-class="red">Get</div>

`data-success`

Type: Expression
Description: Evaluates expression when request succeeds. Response data is available as a $res property on the scope.

Example:

<div ng-post="/example" success="message = $res">Get {{ message }}</div>

`data-error`

Type: Expression
Description: Evaluates expression when request fails. Response data is available as a $res property on the scope.

Example:

<div ng-post="/example" error="errormessage = $res">
  Get {{ errormessage }}
</div>

`data-success-state`

Type: string
Description: Name of the state to nagitate to when request succeeds

Example:

<ng-view></ng-view>
<div ng-post="/example" success-state="account">Get</div>

`data-success-error`

Type: string
Description: Name of the state to nagitate to when request fails

Example:

<ng-view></ng-view>
<div ng-post="/example" error-state="login">Get</div>

38 - ng-show

Show an element when an expression is truthy.

Toggles the CSS display property of an element without removing it from the DOM. The element’s scope is always alive, regardless of visibility.

<div ng-hide="isLoading">Content here</div>

`ng-show`

Type: expression
Required: yes

When truthy, the element is visible (removes the ng-hide CSS class). When falsy, the element is hidden.

`ng-hide`

Type: expression
Required: yes

Inverse of ng-show. When truthy, the element is hidden.

Animation hooks: .ng-hide-add / .ng-hide-add-active when hiding, .ng-hide-remove / .ng-hide-remove-active when showing.

ng-if vs ng-show/hide

Aspect	`ng-if`	`ng-show` / `ng-hide`
DOM presence	Removed when false	Always in DOM
Scope lifetime	Destroyed when false	Always alive
Child watchers	Removed when false	Always active
Initial render cost	Only when true	Always rendered
Animation events	`ng-enter` / `ng-leave`	`ng-hide-add` / `ng-hide-remove`

39 - ng-sref

Create links to named router states.

Generates an href attribute pointing to a named state and handles click navigation. Equivalent to <a href="..."> but driven by state name rather than a raw URL.

<a ng-sref="home">Go home</a>

<!-- State with parameters -->
<a ng-sref="user.profile({ userId: user.id })">{{ user.name }}</a>

<!-- State with query params -->
<a ng-sref="search({ q: 'angular', page: 1 })">Search</a>

`ng-sref`

Type: expression
Required: yes

State name, optionally followed by a params object in parentheses: "stateName" or "stateName({ param: value })". The expression is evaluated in the current scope.

`ng-sref-opts`

Type: object

Options passed to $state.go(). Common options: { reload: true }, { inherit: false }, { location: 'replace' }.

<a ng-sref="home" ng-sref-opts="{ reload: true }">Reload Home</a>

40 - ng-sref-active

Apply classes when a linked state is active.

Adds a CSS class to the element when the referenced state (or any of its descendants) is active. Used to highlight active navigation links.

  <a ng-sref="home" ng-sref-active="active">Home</a>
  <a ng-sref="about" ng-sref-active="active">About</a>
  <a ng-sref="users" ng-sref-active="active">Users</a>
</nav>

`ng-sref-active`

Type: string
Required: yes

CSS class name(s) to apply when the state is active. Multiple classes separated by spaces are supported.

ng-sref-active uses $state.includes() — it is active for the referenced state AND any of its child states.

<a ng-sref="users" ng-sref-active="active">Users</a>

ng-sref-active-eq

Strict variant that only activates for an exact state match (uses $state.is() rather than $state.includes()):

<a ng-sref="users" ng-sref-active-eq="active">Users</a>

41 - ng-state

Bind state declaration data in templates.

A dynamic alternative to ng-sref where both the state name and params come from scope expressions rather than being hardcoded in the attribute.

`ng-state`

Type: expression
Required: yes

Expression that evaluates to a state name string.

`ng-state-params`

Type: expression

Expression that evaluates to the params object for the state.

$scope.currentParams = { userId: 42 };

42 - ng-switch

Switch between exclusive template blocks.

Conditionally renders one of several templates based on the value of an expression. Similar to a JavaScript switch statement.

  <div ng-switch-when="admin">Admin panel</div>
  <div ng-switch-when="editor">Editor tools</div>
  <div ng-switch-default>Standard view</div>
</div>

`ng-switch`

Type: expression
Required: yes

The value to switch on. Applied to the container element.

`ng-switch-when`

Type: string
Required: yes

The value to match against ng-switch. The element is rendered when the switch value equals this.

`ng-switch-default`

Type: none

Rendered when no ng-switch-when matches. No value required.

Multiple ng-switch-when values match the same element:

  <div ng-switch-when="pending" ng-switch-when="processing">In progress</div>
  <div ng-switch-when="done">Complete</div>
</div>

Animation hooks: .ng-enter / .ng-leave on matched/unmatched elements.

43 - ng-view

Render the active routed view.

Marks the element where the router renders the active state’s template. When the active state changes, the content inside ng-view is replaced with the new state’s template, compiled into a new scope.

<ng-view></ng-view>

<!-- As an attribute -->
<div ng-view></div>

<!-- Named view (for multiple named views in one state) -->
<div ng-view="sidebar"></div>

`ng-view`

Type: string

Optional view name. When omitted, this outlet renders the unnamed (default) view of the active state. When specified, renders the named view from the state’s views configuration.

States define their templates in $stateRegistry:

  name: 'home',
  url: '/home',
  template: '<h1>Home</h1>'
});

// Named views:
$stateRegistry.register({
  name: 'dashboard',
  url: '/dashboard',
  views: {
    '': { template: '<p>Main content</p>' },
    'sidebar': { template: '<nav>Sidebar</nav>' }
  }
});

44 - ng-window-* and ng-document-*

Handler for window and document events

Description

The ng-window-* and ng-document-* directives allow you to specify custom behavior for events dispatched from the Window or Document object. The event name is defined by including it in the placeholder of the directive name. Example: ng-window-online binds to the window online event, and ng-document-pointerup binds to the document pointerup event.

Listeners are removed automatically when the owning scope is destroyed.

For standard event names, see Window events and Document events.

Parameters

`ng-window-*`

Type: Expression
Description: Expression to evaluate upon event dispatch. Event object is available as $event.

Example:

<div ng-window-message="data = $event.message.date">{{ data }}</div>

`ng-document-*`

Type: Expression
Description: Expression to evaluate upon document event dispatch. Event object is available as $event.

Example:

<div ng-document-pointerup="$ctrl.endDrag($event)"></div>

Demo

<section ng-app>
  In Chrome DevTools: Open <b>Network tab</b> → Select
  <b>Throttling</b> dropdown -> Click <b>Offline</b> checkbox
  <div ng-window-online="online = true">Connected: {{ online }}</div>
  <div ng-window-offline="offline = true">Disconnected: {{ offline }}</div>
  <button ng-document-click="lastDocumentClick = $event.type">
    Listen for next document click
  </button>
  <div>Document event: {{ lastDocumentClick || 'none' }}</div>
</section>

In Chrome DevTools: Open Network tab → Select Throttling dropdown -> Click Offline checkbox

Connected: {{ online }}

Disconnected: {{ offline }}

Document event: {{ lastDocumentClick || 'none' }}