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.