AngularJS: Zapobieganie wyzwalaniu zdarzenia "mouseenter" na elementach potomnych

Question

Gram teraz z frameworkiem AngularJS i natknąłem się na problem. Zrobiłem dyrektywę, która nazywa się "enter". Wywołuje funkcje na mouseenter i mouseleave. Zastosowałem go jako atrybut do elementów wiersza tabeli. To jest teraz wyzwalane dla każdego elementu potomnego (wszystkie kolumny i itp.), Ale powinno być uruchamiane tylko wtedy, gdy przesuniesz mysz nad wiersz tabeli.

To jest jak moja dyrektywa wygląda następująco:

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'); 
      }); 
     } 
    } 
}); 

Oto przykład: http://jsfiddle.net/dJGfd/1/

Trzeba otworzyć konsolę Javascript by sprawdzić wiadomości dziennika.

Jaki jest najlepszy sposób na uzyskanie pożądanej funkcjonalności w AngularJS? Wolę niż używać jQuery, jeśli istnieje rozsądne rozwiązanie AngularJS.

Answer 1

Można spróbować to:

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); 
      }); 
     } 
    } 
}); 

samo w http://jsfiddle.net/22WgG/

Również zamiast

element.bind("mouseenter", ...); 

i

element.bind("mouseleave", ...); 

można określić

<tr enter ng-mouseenter="changeMouseState(true)" ng-mouseleave="changeMouseState(false)">...</tr> 

Zobacz http://jsfiddle.net/hwnW3/