I'm playing right now with the AngularJS framework and I stumbled upon a problem. I made a directive which is called 'enter'. It triggers functions on mouseenter
and mouseleave
. I applied it as an attribute to the table row elements. It is now triggered for every child element (all the columns and etc), but it should be only triggered, when you go with your mouse over the table row.
This is how my directive looks like:
myapp.directive('enter', function(){
return {
restrict: 'A', // link to attribute... default is A
link: function (scope, element){
element.bind('mouseenter',function() {
console.log('MOUSE ENTER: ' + scope.movie.title);
});
element.bind('mouseleave',function() {
console.log('LEAVE');
});
}
}
});
Here is an example: http://jsfiddle.net/dJGfd/1/
You have to open the Javascript console to see the log messages.
What is the best way to achieve the functionality that I want in AngularJS? I prefer to not use jQuery if there is a reasonable AngularJS solution.
The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element.
The mouseleave event occurs when the mouse pointer leaves the selected element. The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs. Note: Unlike the mouseout event, the mouseleave event only triggers when the mouse pointer leaves the selected elements.
jQuery mouseenter() MethodThe mouseenter() method triggers the mouseenter event, or attaches a function to run when a mouseenter event occurs.. Note: Unlike the mouseover event, the mouseenter event only triggers when the mouse pointer enters the selected element.
Press and hold the left mouse button without moving the mouse. You will see a mouse-pressed event. You might see some extra mouse events, such as mouse-exited and then mouse-entered. Release the mouse button.
You can try this:
myapp.directive('enter', function () {
return {
restrict: 'A',
controller: function ($scope, $timeout) {
// do we have started timeout
var timeoutStarted = false;
// pending value of mouse state
var pendingMouseState = false;
$scope.changeMouseState = function (newMouseState) {
// if pending value equals to new value then do nothing
if (pendingMouseState == newMouseState) {
return;
}
// otherwise store new value
pendingMouseState = newMouseState;
// and start timeout
startTimer();
};
function startTimer() {
// if timeout started then do nothing
if (timeoutStarted) {
return;
}
// start timeout 10 ms
$timeout(function () {
// reset value of timeoutStarted flag
timeoutStarted = false;
// apply new value
$scope.mouseOver = pendingMouseState;
}, 10, true);
}
},
link: function (scope, element) {
//**********************************************
// bind to "mouseenter" and "mouseleave" events
//**********************************************
element.bind('mouseover', function (event) {
scope.changeMouseState(true);
});
element.bind('mouseleave', function (event) {
scope.changeMouseState(false);
});
//**********************************************
// watch value of "mouseOver" variable
// or you create bindings in markup
//**********************************************
scope.$watch("mouseOver", function (value) {
console.log(value);
});
}
}
});
Same thing at http://jsfiddle.net/22WgG/
Also instead
element.bind("mouseenter", ...);
and
element.bind("mouseleave", ...);
you can specify
<tr enter ng-mouseenter="changeMouseState(true)" ng-mouseleave="changeMouseState(false)">...</tr>
See http://jsfiddle.net/hwnW3/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With