AngularJS: предотвращение запуска события «mouseenter» для дочерних элементов

Question

Я играю прямо сейчас с фреймворком 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.

Answer 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> 

См http://jsfiddle.net/hwnW3/