Any global scope based integration would hurt namespacing and could result terrible side-effects in middle and large size applications. I recommend a bit more complicated but definitely cleaner solution, using proxy service.
1. Create proxy service
angular.module('app').service('userClickingHelper', [
function() {
var listeners = [];
return {
click: function(args) {
listeners.forEach(function(cb) {
cb(args);
});
},
register: function(callback) {
listeners.push(callback);
}
};
}
]);
2. Create button directive which is using the userClickingHelper as a dependency.
angular.module('app').directive('onDistributedClick', ['userClickingHelper', function (userClickingHelper) {
return {
restrict: 'A',
link: function (scope, element) {
element.on('click', userClickingHelper.click);
}
};
}]);
3. Register your unrelated service with using the proxy.
angular.module('app').service('myUnrelatedService', [function (userClickingHelper) {
userClickingHelper.register(function(){
console.log("The button is clicked somewhere");
});
}]);
The result is an isolated scope of event distribution, yet neither the directive, nor the service knows about each other. It is also easier to unit-test.
I am using similar solution for globally accessable "Loading" modal so I can abstract the way a controller/service is saying "user should not click or anything right now".
