How do I target only certain elements with the same directive, without changing the markup?

Question

How do I target only certain elements with the same directive, without changing the markup?

I've been researching this for a few hours now.

Let's say I have a jQuery selector of $('#bottom .downloads .links a').click.....

How can I do the same type of thing in an Angular directive?

This is what I have so far and it works, but for all tags on the page.

angular.module('directives', []).directive('a', function(mongoDB){ //Don't need ['customServices'], it can just be [] to use mongoDB
return {
    restrict : 'E',
    link : function(scope, element, attrs){     
    element.on('click', function(){
        //But this gets called for all links on the page
                //I just want it to be links within the #bottom .downloads .links div
                //I wanted to use a directive instead of ng-click="someMethod()"
    });
}

});

Is there a way to target this directive to only a certain div? I guess I could change the restrict to 'C' or 'A' and add an attribute to the links, but I was wondering if I could still layout the front end like I currently am used to with my jQuery selectors.

angularjs
directive

Answer 1

There is a pretty significant philosophical difference between AngularJS and jQuery. In jQuery, everything is in the DOM - including your data - and you do everything through DOM transformations. AngularJS, on the other hand, has separation of concerns built in: models, views, controllers, services, etc., are all separate. We use controllers to glue code together, but each component knows nothing about the other components.

So whereas in jQuery, one might use a selector to find all links matching a certain pattern and then add a certain functionality to it (say a click handler), in AngularJS, the HTML is the "offical record". Instead of abstracting away the attachment of a click handler into a JavaScript function, it is put right into the markup:

<a ng-click="doWhatever()">Click me!</a>

In this case, doWhatever is a method on the scope for that part of the page, probably set in your controller:

$scope.doWhatever = function () {
  console.log("Hello!");
}

So the way you are approaching the problem is not going to work in AngularJS. Instead, you need to look at directives not like jQuery selectors with a function, but as an extension of HTML. You ask yourself, "what does HTML not do out of the box that I need it to?" Your answer is your directive.

But AngularJS already has a built-in directive for click handlers (the ngClick used above).

Answer 2

Angular already has an a directive, so you probably shouldn't create your own.

In an Angular world, to "target only a certain div" (well, <a> within the div) we declaratively target that <a> with a directive, rather than use CSS-like selectors. So yes, restrict to 'A' and add an attribute to the <a> would be best:

<a ... target-this-one>...</a>

I personally think this reads better. Looking at the HTML it is clear which <a>s have special/additional functionality.

As @Josh pointed out, you would only need to do this if ng-click isn't sufficient for your needs.