Allow DOM events in directives to propagate

[builtap]

Currently some directives (i.e. ng:click) stops event propagation. This prevents interoperability with other frameworks that rely capturing such events.

[esprehn]

I think this is nicely solved by making events always propagate and exposing a $event value inside the expression. I was originally against the magic extra values (like what Misko used for the drag-and-drop widget), but I've warmed up to the idea.

For instance, inside an ng:click you may want to know if the user was using any modifier keys when clicking, or which mouse button they used to click. That's not supported right now.

ng:click="foo(); $event.stopPropagation();"

This also allows you to check for modifiers easily too:

ng:click="doSomething($event.shiftKey)"

This click changes behavior based on the shift key being down.

[mhevery]

Glad you warmed up to it, I was thinking the same. The issue is that the controller does not have access to the DOM, and hence it should not be in charge of declaring propagation. This solution nicely side-steps it

Also another idea would be to have something like
<button ng:click="dowork()" ng:capture="click">...</button>

(not likeing the name)

[esprehn]

Yeah capture is the wrong word since the "capture phase" of an event is something entirely different.

What about ng:event-root ? Since it's the root of the propagation (if you had deeper nested ones it'd bubble up to here and then stop).

I still think we need $event that exposes modifiers though. :)

[vojtajina]

I think the propagation could be solved by return value from the expression - as jQuery does.

<div ng:controller="Cntl">
  <a href ng:click="stop()">stop</a>
  <a href ng:click="propagate()">propagate</a>
</div>

function Cntl() {
  this.stop = function() {
    return false;
  },
  this.propagate = function() {
    return true;
  }
}

But that wouldn't solve the issue with meta keys (modifiers).

[IgorMinar]

workaround

you can access the current event that fired ng:click via window.event, or $window.event if you want do inject window into the controller (good for testing).

This is not a good api, but it will get you going until we figure out the best way to handle this.

[gruber76]

Is there a more specific use case for this issue? Wouldn't creating/using a custom directive be just as useful? Or would adding ten lines in to core making a directive "ng:propClick" suffice?

[vojtajina]

@gruber76 Yes, writing custom directive is an easy solution.

This issue has been already solved by 1752c8c

<a ng:click="some($event)">link</a>

function Ctrl() {
  this.some = function(event) {
    event.preventDefault();
  };
}