AngularJS: предотвращение запуска события "mouseenter" на дочерних элементах
Я сейчас играю с рамками AngularJS, и я наткнулся на проблему. Я сделал директиву, которая называется "enter". Он запускает функции на mouseenter
и mouseleave
. Я применил его в качестве атрибута к элементам строки таблицы. Сейчас срабатывает для каждого дочернего элемента (все столбцы и т. д.), Но он должен запускаться только тогда, когда вы идете с помощью мыши по строке таблицы.
вот как выглядит моя директива:
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');
});
}
}
});
здесь пример: http://jsfiddle.net/dJGfd/1/
для просмотра сообщений журнала необходимо открыть консоль Javascript.
каков наилучший способ достичь функциональности, которую я хочу в AngularJS? Я предпочитаю не используйте jQuery, если есть разумное решение AngularJS.
1 ответов
вы можете попробовать это:
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);
});
}
}
});
то же http://jsfiddle.net/22WgG/
и вместо
element.bind("mouseenter", ...);
и
element.bind("mouseleave", ...);
вы можете указать
<tr enter ng-mouseenter="changeMouseState(true)" ng-mouseleave="changeMouseState(false)">...</tr>