ng-window-* and ng-document-*

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>