Implementing a global scope integration may negatively impact namespacing and lead to undesirable side effects in medium to large applications. To avoid this, I suggest a more intricate but cleaner approach by utilizing a proxy service.
1. Develop the 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 a button directive that leverages 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. Incorporate your unrelated service using the proxy registration method.
angular.module('app').service('myUnrelatedService', [function (userClickingHelper) {
userClickingHelper.register(function(){
console.log("The button is clicked somewhere");
});
}]);
This results in an isolated event distribution scope where the directive and service remain unaware of each other. Additionally, this setup simplifies unit testing.
I have applied a similar technique for a globally accessible "Loading" modal to abstract how controllers/services handle restricting user interactions at specific times.