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

Return to the regular view of this page.

Directives

1 -

2 - 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.

3 - 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>

Hello I am never displayed! I am server content!

4 - 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 = count + 1"
    ng-init="count = 0"
    placeholder="Click or tab away from me"
  />
  Lost focus {{ count }} times
</section>
Lost focus {{ count }} times

5 - 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 }}

6 - 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.

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:

AnimationOccurs
add-classBefore the class is applied to the element
remove-classBefore the class is removed from the element
set-classBefore 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

  • 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



Using String Syntax

Using Array Syntax




Using Array and Map Syntax


7 - ng-class-even

Apply CSS classes to even-indexed elements inside ng-repeat.

Description

The ng-class-even directive works just like ng-class, but it applies only to even-indexed elements in an ng-repeat block.

Must be used inside ng-repeat.

Animations

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

AnimationOccurs
add-classBefore the class is applied to the element
remove-classBefore the class is removed from the element

Parameters

ng-class-even

  • Type: string | array

  • Description: An expression evaluating to a space-delimited string or array of class names.

  • Example:

    <div ng-repeat="item in items" ng-class-even="'even-row'"></div>

Demo

<section ng-app>
  <style>
    .even-row {
      background-color: gainsboro;
    }
  </style>
  <div ng-repeat="item in [1,2,3,4]" ng-class-even="'even-row'">{{item}}</div>
</section>
{{item}}

8 - ng-class-odd

Apply CSS classes to odd-indexed elements inside ng-repeat.

Description

The ng-class-odd directive works just like ng-class, but it applies only to odd-indexed elements inside an ng-repeat block.

Must be used inside ng-repeat.

Animations

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

AnimationOccurs
add-classBefore the class is applied to the element
remove-classBefore the class is removed from the element

Parameters

ng-class-odd

  • Type: string | array

  • Description: An expression evaluating to a space-delimited string or array of class names.

  • Example:

    <div ng-repeat="item in items" ng-class-odd="'odd-row'"></div>

Demo

<section ng-app>
  <style>
    .odd-row {
      background-color: gainsboro;
    }
  </style>
  <div ng-repeat="item in [1,2,3,4]" ng-class-odd="'odd-row'">{{item}}</div>
</section>
{{item}}

9 - 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>

Demo

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

10 - 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/css/angular.min.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 }}

11 - 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
{{ copied }}

12 - 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
{{ cut }}

13 - 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 = count + 1"
  >
    Increment
  </button>
  <span> count: {{count}} </span>
</section>
count: {{count}}

14 - 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.

Parameters

ng-el

  • Type: string (optional)

  • Description: Name of the key under which the element will be stored in scope. If omitted, the element’s id attribute will be used.

  • Example:

    <div id="box" ng-el="$box"></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>

15 - 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 = count + 1"
    ng-init="count = 0"
    placeholder="Click or tab into me"
  />
  Focused {{ count }} times
</section>
Focused {{ count }} times

16 - 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>

17 - ng-include

Include a template

Description

18 - 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>
{{ $window.document.location }}

19 - 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 = count + 1"
    ng-init="count = 0"
    placeholder="Click here, then press down a key."
  />
  Keydown {{ count }} times
</section>
Keydown {{ count }} times

20 - 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 = count + 1"
    ng-init="count = 0"
    placeholder="Click here, then press down a key."
  />
  Keyup {{ count }} times
</section>
Keyup {{ count }} times

21 - 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>
{{ res }}

22 - 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 = count + 1">
    Press Mouse Down
  </button>
  Mouse Down {{ count }} times
</section>
Mouse Down {{ count }} times

23 - 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 = count + 1">Mouse Enter</div>
  Mouse Enter {{ count }} times
</section>
Mouse Enter
Mouse Enter {{ count }} times

24 - 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 = count + 1">Mouse Leave</div>
  Mouse Leave {{ count }} times
</section>
Mouse Leave
Mouse Leave {{ count }} times

25 - 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 = count + 1">Mouse Move</div>
  Mouse Move {{ count }} times
</section>
Mouse Move
Mouse Move {{ count }} times

26 - 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 = count + 1">Mouse Out</div>
  Mouse Out {{ count }} times
</section>
Mouse Out
Mouse Out {{ count }} times

27 - 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 = count + 1">Mouse Over</div>
  Mouse Over {{ count }} times
</section>
Mouse Over
Mouse Over {{ count }} times

28 - 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 = count + 1">Mouse Up</div>
  Mouse Up {{ count }} times
</section>
Mouse Up
Mouse Up {{ count }} times

29 - 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>
    {{ 2 + 2 }}

30 - 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>

31 - ng-window-*

Handler for window events

Description

The ng-window-* directive allows you to specify custom behavior for events dispatched from Window object. The event name is defined by including it in the placeholder of directive’s name. Example: ng-window-online will bind the directive to the online event. For a full list of standard options, see 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>

Demo

<section ng-app>
  Try disabling your network connection
  <div ng-window-online="online = true">Connected: {{ online }}</div>
  <div ng-window-offline="offline = true">Disconnected: {{ offline }}</div>
</section>
Try disabling your network connection
Connected: {{ online }}
Disconnected: {{ offline }}