jQlite .find() traversing not working

Question

I'm using an angular directive and I am not having any luck with the jQlite .find() method:

DIRECTIVE

function cardsList () {
    return {
        restrict: 'A',
        controller: 'CardsController',
        templateUrl: 'app/directives/cards-list/cards-list.html',
        link: function ($scope, $element, attr, CardsController) {
                var cardLink = $element.find('a');

                console.log(cardLink);
            });

        }
    }
}

contextCards.directive('cardsList', cardsList);

An empty [] gets logged on the console.

TEMPLATE

<li data-ng-repeat="card in cards" class="cards--item">
    <a class="cards--link" data-ng-href="#/{{ card.slug }}">{{ card.title }}</a>
</li>

VIEW

<ul class="col-xs-12 cards--list" cards-list></ul>

All I want to do is traverse to the <a> elements. According to the docs, .find() only works on tag names which is exactly what I'm trying to do.

EDIT: I want to add a class to the <a></a> if the card the link represents is selected (like .current-card)

The problem is most probably with the `ng-repeat` - try removing it to see that you *will* find the ``. Why do you want to do DOM traversal? There may be other ways. — Nikos Paraskevopoulos, Aug 08 '15 at 22:06
You're both right `ng-repeat` is the problem. I want to add a class to the `` if the card the link represents is selected (like `.current-card`). So I put the `

score 0 · Accepted Answer · answered Aug 08 '15 at 22:29

From your answer it's not clear how the selected card is specified in the model, so I am assuming that the card object (the object of each iteration of ng-repeat) holds this flag, for example: card.isSelected.

Then, you could use ng-class to specify which CSS class to add based on this value:

<li ng-repeat="card in cards" class="cards--item">
    <a class="cards--link" 
       ng-class="{'current-card': card.isSelected}"
       ng-href="#/{{ card.slug }}">{{ card.title }}</a>
</li>

Addendum:

The answer to your original question about why .find("a") returns empty, it is because ngRepeat directive transcludes its content (which means that Angular takes the elements out of DOM during compilation), and places it at a later stage than your link function.

jQlite .find() traversing not working

1 Answers1