Access Attributes / $element context from function called by Angular directive

Question

Within a directive definition, 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?

---

EDIT: 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...

---

In this case, I'm just adding a contextual .active class to a nav element, based on the value of $location.path(), as per this post and this one. However, in those examples you need to explicitly and redundantly pass a copy of the contents of the href attribute as an argument to the getClass() function you're calling from ng-class. But isn't there a way to programmatically access the href attribute from within getClass() and avoid redundantly passing identical content as an arg?

For example, a controller with a getClass() function the way I'd imagine it could work:

function navCtrl($scope, $routeParams) {
    $scope.getClass = function($element, $attrs) {
        if ($location.path().substr(0, path.length) == $attrs.href) {
            return "active"
        } else {
            return ""
        }
    }
}

Which you could then call simply and elegantly with:

<a ng-class="getClass()" href="/tasks">Tasks</a>

rather than:

<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>

(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!)

Answer 1

You actually can do this... BUT YOU SHOULD NOT DO THIS. lol...

Here's how to do what you're asking...

In your markup, pass $event into your function.

<a ng-click="test($event)" href="whatever">Click Me</a>

Then in your controller, get the target element of the event:

$scope.test = function($event) {
    alert($event.target.href);
};

Now here is why you probably shouldn't do this:

If you reference the DOM, or manipulate the DOM in your controller, you're endangering dependency injection and also the separation of concerns from within the Angular structure. Sure you could still inject $event as a dependency if you were testing your function, but depending on what you're doing inside of that function, you might still have ruined your DI, and you're trying to make a controller do a directive's work (which is to try to keep your controller from being tightly-coupled to your markup)

That said, if ALL your doing is just getting a value, it's probably fine, but you're still coupling your controller to your markup to some degree. If you're doing anything else with that DOM element, you're off the reservation.

Answer 2

I don't think you can do that. The angular philosophy is to avoid accessing the DOM directly from your controller. You have already identified your two options for doing this in Angular:

• pass in the href as a param i.e.. getClass('/tasks')
• or, write a custom directive

Alternatively, if the class is purely presentational and doesn't affect how your application runs then you could ignore angular and use a quick and dirty jQuery function to do the job for you.

The lack of direct interaction with the DOM can be a bit strange at first but it's a godsend in the long term as your codebase grows, gets more complicated and needs more tests.

Answer 3

Here's a completely different answer: you don't need a Angular to change styling based on href. You can use CSS selectors for that.

In your styles:

a[href="/something"] {
    background-color: red;
}

That in combination with anything you might be doing with ng-class should be everything you need.