如果元素具有Id或Class（角），则应用Apply指令

Question

This is a general problem I've run into while trying to learn angular.

How would you create a directive that only acts on certain elements which have the directive name AND an ID, Class, or other property? Or/Also how might you make a directive that does different things depending upon ID, Class or other properties?

I don't mean the type of thing where you create a directive as a class, and just use ngClass . As an example... Imagine a scenario where a user is defining part of the HTML and I can't touch it, but I know that there will be a nav tag with ul's and li's inside of it. How do I make a directive that can be applied to the nav tag that has id="navi" without affecting the other nav tags on the page if there are any?

---

To be clear, I come from a jQuery background, so I'm trying to unlearn a lot of bad habits lol. I'm very used to the concept of selecting an element, or a collection of elements via $ and applying some kind of manipulation or what have you. How can I achieve this type of selective filtering of functionality in a scenario where I'm not able to touch parts of the HTML directly?

Answer 1

You have access to the element at hand as well at the attributes of that element within the link function. Example concerning you <nav id="navi"> case:

<nav my-directive id="navi"></nav>

Directive time!

.directive("myDirective", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            if (elem[0].id == "navi") {
                //apply specific condition to elem here
            }
        }
    }
}]);

As you can see, you can check specific properties of the element within the link function. attrs is an object with all of the elements attributes as well.