We Keep Coding

How to add a click interceptor in Angular as globally as possible?

I'm working on a software that got quite huge over many years and we've noticed there are many buttons (or clickable elements like <a> and <img>) that aren't safe from double clicks. Since the software is running on sometimes quite laggy hardware (with touch screens that might bug out and register double clicks for no apparent reason) I'd like to implement some kind of global solution for it.
My first thoughts were:
Global click listener that gets the click event, processes it and starts a cooldown on that specific element. If another click event is registered before the cooldown is over, it'll just block the event.
Changing the click() prototype method of a button or something. I'm not that good with plain JS but I've done something like that for plugins before so I know at least conceptually how that works.
Adding a directive that can be inserted into existing elements which need double click protection. This would probably be the "scalpel" method, even though people might just forget to add it. Sadly I have no idea whether my idea is actually possible with directives as I've never implemented one before.
Something like a class that can be inherited which handles all clicks. Might be possible to implement together with solutions (1) and/or (2).
Do you have a direction you can point me to to investigate further? Is some kind of global handling for this a good idea at all? Are any/all of the solutions possible at all?

Reactjs component.setProps() alternative, how to send variable to detached element

I am using things like:
var MUSIC = React.renderComponent( Music({ }), document.getElementById("music-div"))
to later in the script, in an independent element (so not parent of MUSIC) do:
MUSIC.setProps({ url: 'http://...' })
to send a song to de music player, which is detached from the rest, so it does not accidentally gets refreshed by react, because it was programmatically generated (wavesurferjs)
Fine, however, the recent few updates (.11.x) have apparently deprecated that. I do understand where they are coming from, it fits the whole React logic.
However, how will we now ever programmatically modify state/props from outside? Even when I want to talk directly to the parent, which should be allowed.
The changelog tells me in this case the MUSIC variable would have become a descriptor, however, in consoles out the exact same object as far as I can tell. And the documentation says nothing about this descriptor and even less about alternative possibilities.
(http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#descriptors)
So, if I have two divs
<div id="main-div"> <button></button></div>
<div id="music-div"> </div>
And want to keep them separate, how would I go about giving two parallel parents each-other props?
I don't want to put both in one react div, which would not even solve my problem, because, how would the button in main-div give the props to music-div?
Or would their conceived alternative be to just create a new instance on that id and hope it diffs to 0?
The update states:
"You could store that reference and then call functions on it (eg
component.setProps(...)). This no longer works."
However, that still does work, with (0.11.1) so I don't understand what they are talking about?

You've got several options.
Wrap both main-div and music-div with an "Application" component. Pass a handler down that changes its state so the div's are re-rendered.
Use an event bus to dispatch and listen to events. Basically a component exposes its private setState/setProps() methods to the event bus in a listener. The other component dispatches an event that triggers that listener.

A context dependent navbar

I'm trying to build an Android action bar-like navbar in Ember. I would like the action bar to show the route (friendly) name and have context dependant button's on the right side. I came a long way, this jsFiddle will explain things more clearly:
jsFiddle
However, the activate event isn't I am using to figure out when a route has been changed, is only firing when one first visits the route (traversing back up the route tree won't trigger it), thus my context isn't loaded consistently.
What would be the best way to solve this problem? I know the serialize, renderTemplate and setupController fire on every route change, but none of these methods are intended to be used this way. Is there perhaps a way to add a custom event to my routes, that fires on every route change?
On a side note, I am completely new to ember so I may be going about this completely the wrong way, in that case, I am eager to hear a generally better solution, than mine.
UPDATE:
Thanks to kingpin2k's tip I was able to clean up my code a bit, for future reference here's the updated fiddle:
jsFiddle

didTransition/willTransition were created for this reason. In your case didTransition will make the most sense.
actions: {
didTransition: function(){
console.log('level two transition');
},
}
http://jsfiddle.net/FZ29Q/

Javascript FSM Possibilities / Idea

So I have been making stuff in Unity3D and decided to try an extension called Playmaker. Basically is uses a FSM (Finite State Machine) to design the flow of states and events. You can drag an event to a different state to trigger another state of events, etc. (Reference : http://www.hutonggames.com/features.html)
NOTE : The actual product I linked has nothing to do with the idea I want to try and build. Just a reference.
Well I would love to be able to do something simliar in Javascript. I think I have some of the logic down but I'm thinking more about User Experience. I want a user to be able to create an FSM with my logic in the browser using Javascript.
I'm not asking for anyone to code this for me or anything as I am experienced enough in javascript to do the bulk of it. I was thinking more about the way you can drag one event to another and it creates a visual arrow showing the user what events are connected. If you look at the first tutorial on the referenced link I provided you will understand what I mean. The arrow length and curves would be dynamic. Possibly be able to drag around states to re organize the layout of the states. This would obviously change the way the arrows pointed as well.
I hope that all made sense.
Ideas? Pointers? Maybe someone has done something like this already? I did find one Javascript State Machine but it generates once, doesn't allow users to move anything, the event dragging to another state is very important.

Box2D: Setting more than one b2ContactListener to world? - Getting weird behavior

So I am very new to Box2D and I'm trying to figure out how to use b2ContactListener.
Are you allowed to set more than one Contact Listeners to a world? I would think so. But when set two contact listeners like so:
world.SetContactListener(listener);
world.SetContactListener(listener2);
It behaves like listener2 was the only one set. Why is that?
Also when I change the order of how I set the listeners like so:
world.SetContactListener(listener2);
world.SetContactListener(listener);
Then it behaves like listener was the only contact listener set and ignores listener2.
The only reason I think why this could be behaving like this is because both of the listeners override the BeginContact and EndContact methods so it's confused.
I am using the JavaScript port of Box2D (Box2DWeb) by the way. But if you know the solution to the issue in Objective-C or C++ that's fine as I know those languages.

The hint is in the name - "Set" rather than "Add". It implies that there is only 1 listener supported. Update your listener class to dispatch to multiple methods if you need to.
It seems you are confused about what overriding methods entails. Having the same method overridden on multiple objects does not cause anything to get confused. The issue is that there is only one listener meant to be registered at once (because having a lot of listeners would slow things down - it will get called a lot)