JQlite.find () intersection not working
I am using angular directive and I have no luck with 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);
Empty is []
logged to 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 go to elements <a>
. According to the docs , .find()
it works only with tag names that is exactly what I try to do.
EDIT: I want to add a class in <a></a>
if a map representing a link is selected (for example .current-card
)
source to share
It is not clear from your answer how the selected map is specified in the model, so I am assuming that the object card
(the object of each iteration ng-repeat
) contains this flag, e.g card.isSelected
. : .
Then you can use ng-class
to specify which CSS class to add based on that 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>
Adding:
The answer to your original question as to why it .find("a")
returns empty is because the directive ngRepeat
passes its content (which means Angular fetches elements from the DOM at compile time) and puts it later than your function link
.
source to share