is it possible to use one event handler within other in link function of angular directive, something like this:
app.directive('testDirective',function(){
return{
restrict:'A',
link:function(scope, element, attrs) {
element.bind('mousedown', function () {
element.bind('keydown', function(evt) {
console.log('pressed',evt);
});
});
}
}});
Yes , there are situations where you required to nest your event functions , for ex as below ,where nested events will get binded once the parent event is triggered . as example below mouseenter , mouseleave will be triggered after click of the element
app.directive('myDirective',function(){
return {
restrict:'A',
link:function(scope,element,attrs){
element.on('click',function(){
console.log("clicked")
element.on('mouseenter',function(){
console.log("hello entered mouse");
});
element.on('mouseleave',function(){
console.log("helllo leaving")
})
})
}
}
})
Yes. If you look at the angular examples for directives there is a drag/drop example which nests event bindings, namely mouseup, mousedown and mousemove events.
The bindings will happen in the expected order; in your case, keydown will not be bound until the mousedown event has been triggered.
Edit: you should be using .on() instead of .bind(), which is the newer and better syntax (see here).
// Create a function and call in even handlers.
app.directive('testDirective',function(){
return{
restrict:'A',
link:function(scope, element, attrs) {
element.bind('mousedown', logToConsole);
element.bind('keydown', logToConsole);
function logToConsole() {
console.log('pressed');
}
}
};
});
