title: Only get the attribute from element, where Event was fired in AngularJS
body: <p>iam new to AngularJS. I try to move from Backbone.js to Angular and first think i want to do its quite simple: fadeIn and fadeOut.</p>
  
  <p>So my HTML look like these:</p>
  
  <pre><code>&lt;div id="calendar" style="padding-left: 50px" ng-controller="CalendarButtonController"&gt;
      &lt;!-- prev button --&gt;
      &lt;div class="calendar-btn prev" ng-mouseover="fadeIn()" ng-mouseleave="fadeOut()" fade-duration="5000" fade-target="btnPrev"&gt;
          &lt;img id="btnPrev" src="img/btn-prev_hover.png"&gt; 
      &lt;/div&gt;
  
      &lt;!-- next button --&gt;
      &lt;div class="calendar-btn next" ng-mouseover="fadeIn()" ng-mouseleave="fadeOut()" fade-duration="5000" fade-target="btnNext"&gt;
          &lt;img id="btnNext" src="img/btn-next_hover.png"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the idea is: If the mouse is over prev-button div, the image inside the div will be fade in. In the fade-target-Attribute is the specific ID of the element, which will be faded. On mouseover the element (defined in the fade-target-Attribute) will be fade in and on mouseleave the element will be fade out. So i implemented a controller and a directive:</p>
  
  <pre><code>function CalendarButtonController($scope){
      $scope.fadeIn = function() {
          $scope.$emit('event', 'fadeIn');
      }
  
      $scope.fadeOut = function() {
          $scope.$emit('event', 'fadeOut');
      }
  }
  
  angular.module('components', [])
      .directive('fadeDuration', function ($rootScope) {
          return {
              restrict: 'A',
              link: function(scope, el, attrs) {              
                  $rootScope.$on('event', function(event, message) {
                      if(message  == "fadeIn"){
                          fadeIn();
                      }
  
                      if(message  == "fadeOut"){
                          fadeOut();
                      }
                  });
  
                  function fadeIn(){
                      $('#'+attrs.fadeTarget).fadeIn(attrs.fadeDuration);             
                  }
  
                  function fadeOut(){
                      $('#'+attrs.fadeTarget).fadeOut(attrs.fadeDuration);                
                  }
              }
          }       
      });
  </code></pre>
  
  <p>The fadein and fadeout of the element works, but the problem is: If i move the mouse over the prev-button-div both images (prev-Button and next-Button) fade in. But it should only fade in the image of prev-Button. How is it possible, to get only the attribute of an element, where the event was fired? In the directive are alway all attributes from all elements matching the directive. </p>
  
  <p>Edit: And is there a easier way to achieve a fadeIn and fadeOut effect?</p>