NgEventDirective class
Allows you to specify custom behavior for DOM UI events such as mouse, keyboard and touch events.
The custom behavior is specified via an Angular binding expression specified
on the ng-
event directive (e.g. ng-click
). This expression is evaluated
on the correct scope
every time the event occurs. The event is available
to the expression as $event
.
This is more secure than inline DOM handlers in HTML that execute arbitrary JavaScript code and have access to globals instead of the scope without the safety constraints of the Angular expression language.
Example:
<button ng-click="lastEvent='Click'"
ng-doubleclick="lastEvent='DblClick'">
Button
</button>
The full list of supported handlers are:
ng-blur
ng-change
ng-click
ng-contextmenu
ng-doubleclick
ng-drag
ng-dragend
ng-dragenter
ng-dragleave
ng-dragover
ng-dragstart
ng-drop
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseout
ng-mouseover
ng-mouseup
ng-mousewheel
ng-scroll
ng-touchcancel
ng-touchend
ng-touchmove
ng-touchstart
@NgDirective(selector: '[ng-blur]', map: const {'ng-blur': '&onBlur'}) @NgDirective(selector: '[ng-change]', map: const {'ng-change': '&onChange'}) @NgDirective(selector: '[ng-click]', map: const {'ng-click': '&onClick'}) @NgDirective(selector: '[ng-contextmenu]', map: const {'ng-contextmenu': '&onContextMenu'}) @NgDirective(selector: '[ng-doubleclick]', map: const {'ng-doubleclick': '&onDoubleClick'}) @NgDirective(selector: '[ng-drag]', map: const {'ng-drag': '&onDrag'}) @NgDirective(selector: '[ng-dragend]', map: const {'ng-dragend': '&onDragEnd'}) @NgDirective(selector: '[ng-dragenter]', map: const {'ng-dragenter': '&onDragEnter'}) @NgDirective(selector: '[ng-dragleave]', map: const {'ng-dragleave': '&onDragLeave'}) @NgDirective(selector: '[ng-dragover]', map: const {'ng-dragover': '&onDragOver'}) @NgDirective(selector: '[ng-dragstart]', map: const {'ng-dragstart': '&onDragStart'}) @NgDirective(selector: '[ng-drop]', map: const {'ng-drop': '&onDrop'}) @NgDirective(selector: '[ng-focus]', map: const {'ng-focus': '&onFocus'}) @NgDirective(selector: '[ng-keydown]', map: const {'ng-keydown': '&onKeyDown'}) @NgDirective(selector: '[ng-keypress]', map: const {'ng-keypress': '&onKeyPress'}) @NgDirective(selector: '[ng-keyup]', map: const {'ng-keyup': '&onKeyUp'}) @NgDirective(selector: '[ng-mousedown]', map: const {'ng-mousedown': '&onMouseDown'}) @NgDirective(selector: '[ng-mouseenter]', map: const {'ng-mouseenter': '&onMouseEnter'}) @NgDirective(selector: '[ng-mouseleave]', map: const {'ng-mouseleave': '&onMouseLeave'}) @NgDirective(selector: '[ng-mousemove]', map: const {'ng-mousemove': '&onMouseMove'}) @NgDirective(selector: '[ng-mouseout]', map: const {'ng-mouseout': '&onMouseOut'}) @NgDirective(selector: '[ng-mouseover]', map: const {'ng-mouseover': '&onMouseOver'}) @NgDirective(selector: '[ng-mouseup]', map: const {'ng-mouseup': '&onMouseUp'}) @NgDirective(selector: '[ng-mousewheel]', map: const {'ng-mousewheel': '&onMouseWheel'}) @NgDirective(selector: '[ng-scroll]', map: const {'ng-scroll': '&onScroll'}) @NgDirective(selector: '[ng-touchcancel]', map: const {'ng-touchcancel': '&onTouchCancel'}) @NgDirective(selector: '[ng-touchend]', map: const {'ng-touchend': '&onTouchEnd'}) @NgDirective(selector: '[ng-touchmove]', map: const {'ng-touchmove': '&onTouchMove'}) @NgDirective(selector: '[ng-touchstart]', map: const {'ng-touchstart': '&onTouchStart'}) class NgEventDirective { // NOTE: Do not use the element.on['some_event'].listen(...) syntax. Doing so // has two downsides: // - it loses the event typing // - some DOM events may have multiple platform-dependent event names // under the covers. The standard Stream getters you will get the // platform specific event name automatically but you're on your own if // you use the on[] syntax. This also applies to $dom_addEventListener. // Ref: http://api.dartlang.org/docs/releases/latest/dart_html/Events.html initListener(var stream, var handler) { int key = stream.hashCode; if (!listeners.containsKey(key)) { listeners[key] = handler; stream.listen((event) => scope.$apply(() { handler({r"$event": event}); })); } } set onBlur(value) => initListener(element.onBlur, value); set onChange(value) => initListener(element.onChange, value); set onClick(value) => initListener(element.onClick, value); set onContextMenu(value) => initListener(element.onContextMenu, value); set onDoubleClick(value) => initListener(element.onDoubleClick, value); set onDrag(value) => initListener(element.onDrag, value); set onDragEnd(value) => initListener(element.onDragEnd, value); set onDragEnter(value) => initListener(element.onDragEnter, value); set onDragLeave(value) => initListener(element.onDragLeave, value); set onDragOver(value) => initListener(element.onDragOver, value); set onDragStart(value) => initListener(element.onDragStart, value); set onDrop(value) => initListener(element.onDrop, value); set onFocus(value) => initListener(element.onFocus, value); set onKeyDown(value) => initListener(element.onKeyDown, value); set onKeyPress(value) => initListener(element.onKeyPress, value); set onKeyUp(value) => initListener(element.onKeyUp, value); set onMouseDown(value) => initListener(element.onMouseDown, value); set onMouseEnter(value) => initListener(element.onMouseEnter, value); set onMouseLeave(value) => initListener(element.onMouseLeave, value); set onMouseMove(value) => initListener(element.onMouseMove, value); set onMouseOut(value) => initListener(element.onMouseOut, value); set onMouseOver(value) => initListener(element.onMouseOver, value); set onMouseUp(value) => initListener(element.onMouseUp, value); set onMouseWheel(value) => initListener(element.onMouseWheel, value); set onScroll(value) => initListener(element.onScroll, value); set onTouchCancel(value) => initListener(element.onTouchCancel, value); set onTouchEnd(value) => initListener(element.onTouchEnd, value); set onTouchMove(value) => initListener(element.onTouchMove, value); set onTouchStart(value) => initListener(element.onTouchStart, value); // Is it better to use a map of listeners or have 29 properties on this // object? One would pretty much only assign to one or two of those // properties. I'm opting for the map since it's less boilerplate code. var listeners = {}; dom.Element element; Scope scope; NgEventDirective(dom.Element this.element, Scope this.scope); }
Properties
Element element #
dom.Element element
var listeners #
var listeners = {}
dynamic set onBlur(value) #
set onBlur(value) => initListener(element.onBlur, value);
dynamic set onChange(value) #
set onChange(value) => initListener(element.onChange, value);
dynamic set onClick(value) #
set onClick(value) => initListener(element.onClick, value);
dynamic set onContextMenu(value) #
set onContextMenu(value) => initListener(element.onContextMenu, value);
dynamic set onDoubleClick(value) #
set onDoubleClick(value) => initListener(element.onDoubleClick, value);
dynamic set onDrag(value) #
set onDrag(value) => initListener(element.onDrag, value);
dynamic set onDragEnd(value) #
set onDragEnd(value) => initListener(element.onDragEnd, value);
dynamic set onDragEnter(value) #
set onDragEnter(value) => initListener(element.onDragEnter, value);
dynamic set onDragLeave(value) #
set onDragLeave(value) => initListener(element.onDragLeave, value);
dynamic set onDragOver(value) #
set onDragOver(value) => initListener(element.onDragOver, value);
dynamic set onDragStart(value) #
set onDragStart(value) => initListener(element.onDragStart, value);
dynamic set onDrop(value) #
set onDrop(value) => initListener(element.onDrop, value);
dynamic set onFocus(value) #
set onFocus(value) => initListener(element.onFocus, value);
dynamic set onKeyDown(value) #
set onKeyDown(value) => initListener(element.onKeyDown, value);
dynamic set onKeyPress(value) #
set onKeyPress(value) => initListener(element.onKeyPress, value);
dynamic set onKeyUp(value) #
set onKeyUp(value) => initListener(element.onKeyUp, value);
dynamic set onMouseDown(value) #
set onMouseDown(value) => initListener(element.onMouseDown, value);
dynamic set onMouseEnter(value) #
set onMouseEnter(value) => initListener(element.onMouseEnter, value);
dynamic set onMouseLeave(value) #
set onMouseLeave(value) => initListener(element.onMouseLeave, value);
dynamic set onMouseMove(value) #
set onMouseMove(value) => initListener(element.onMouseMove, value);
dynamic set onMouseOut(value) #
set onMouseOut(value) => initListener(element.onMouseOut, value);
dynamic set onMouseOver(value) #
set onMouseOver(value) => initListener(element.onMouseOver, value);
dynamic set onMouseUp(value) #
set onMouseUp(value) => initListener(element.onMouseUp, value);
dynamic set onMouseWheel(value) #
set onMouseWheel(value) => initListener(element.onMouseWheel, value);
dynamic set onScroll(value) #
set onScroll(value) => initListener(element.onScroll, value);
dynamic set onTouchCancel(value) #
set onTouchCancel(value) => initListener(element.onTouchCancel, value);
dynamic set onTouchEnd(value) #
set onTouchEnd(value) => initListener(element.onTouchEnd, value);
dynamic set onTouchMove(value) #
set onTouchMove(value) => initListener(element.onTouchMove, value);
dynamic set onTouchStart(value) #
set onTouchStart(value) => initListener(element.onTouchStart, value);
Methods
dynamic initListener(stream, handler) #
initListener(var stream, var handler) { int key = stream.hashCode; if (!listeners.containsKey(key)) { listeners[key] = handler; stream.listen((event) => scope.$apply(() { handler({r"$event": event}); })); } }