AngularJS: Prevenzione dell'attivazione di eventi "mouseenter" sugli elementi figlio

Question

Attualmente sto giocando con il framework AngularJS e mi sono imbattuto in un problema. Ho fatto una direttiva che si chiama 'enter'. Attiva le funzioni su mouseenter e mouseleave. L'ho applicato come attributo agli elementi di riga della tabella. Ora è attivato per ogni elemento figlio (tutte le colonne e così via), ma dovrebbe essere attivato solo quando si sposta il mouse sulla riga della tabella.

Ecco come il mio direttiva assomiglia:

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

Ecco un esempio: http://jsfiddle.net/dJGfd/1/

Dovete aprire la console Javascript per vedere i messaggi di log.

Qual è il modo migliore per ottenere la funzionalità che desidero in AngularJS? Preferisco non utilizzare jQuery se esiste una soluzione AngularJS ragionevole.

Answer 1

Si può provare questo:

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

stessa cosa a http://jsfiddle.net/22WgG/

Inoltre, invece

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

e

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

è possibile specificare

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

Vedi http://jsfiddle.net/hwnW3/