title: Angular Animations for Mouse Hover
body: <p>I have a directive that needs to check for when the mouse is over a particular DOM element. Once it knows, it will add some animation to the element using the $animate service from Angular 1.2.0 RC3. In the code below, <code>attrs.isMouseOver</code> indicates that check. The issue here is that I am not sure how to check for that using attrs. Note: I do not want to use ng-mouseover unless I absolutely have to.</p>
  
  <pre><code>angular.module('App')
    .directive('shift', function ($animate) {
      return function (scope, element, attrs) {
        scope.watch(attrs.isMouseOver, function (hover) {
          if (hover) {
            $animate.addClass(element, 'shift');
          } else {
            $animate.removeClass(element, 'shift');
          }
        })
      }
    });
  </code></pre>