title: Access Attributes / $element context from function called by Angular directive
body: <p>Within a <a href="http://docs.angularjs.org/guide/directive#Attributes" rel="nofollow noreferrer">directive definition</a>, there's an API for accessing $element and $attrs, so you can refer back to the element from which the directive was called. How would I access $element and $attrs when calling a custom function using a standard directive like ng-class?</p>
  
  <hr>
  
  <p><strong>EDIT</strong>: I understand that this is not an idiomatic approach. This question is applicable to rapid prototypes, which is a great use for many of Angular's features. Just not the ones that are all about sustainability, separation of concerns, etc. My primary concern is velocity. Thus, being able to bang something out quickly with the built-in directives and a quick controller method can, in fact, be a virtue, and can win the opportunity to do a fuller and more proper implementation down the road...</p>
  
  <hr>
  
  <p>In this case, I'm just adding a contextual <code>.active</code> class to a nav element, based on the value of <code>$location.path()</code>, as per <a href="https://stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item-in-angularjs">this post</a> and <a href="https://stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item-in-angularjs">this one</a>. However, in those examples you need to explicitly and redundantly pass a copy of the contents of the <code>href</code> attribute as an argument to the <code>getClass()</code> function you're calling from <code>ng-class</code>. But isn't there a way to programmatically access the <code>href</code> attribute from within <code>getClass()</code> and avoid redundantly passing identical content as an arg?</p>
  
  <p>For example, a controller with a <code>getClass()</code> function the way I'd imagine it could work:</p>
  
  <pre><code>function navCtrl($scope, $routeParams) {
      $scope.getClass = function($element, $attrs) {
          if ($location.path().substr(0, path.length) == $attrs.href) {
              return "active"
          } else {
              return ""
          }
      }
  }
  </code></pre>
  
  <p>Which you could then call simply and elegantly with:</p>
  
  <pre><code>&lt;a ng-class="getClass()" href="/tasks"&gt;Tasks&lt;/a&gt;
  </code></pre>
  
  <p>rather than:</p>
  
  <pre><code>&lt;a ng-class="getClass('/tasks')" href="/tasks"&gt;Tasks&lt;/a&gt;
  </code></pre>
  
  <p>(I recognize another option is to create a custom directive that does this, but for now I'd just like to figure out if it's possible to access $attrs and/or $element from within a controller function that's been called by a directive. Thanks!)</p>