jQlite .find()遍历不工作

Question

我使用的是一个角指令，在jQlite .find()方法方面没有任何进展：

指令

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);

一个空的[]被记录在控制台上。

模板

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

视图

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

我要做的就是遍历<a>元素。根据文档的说法，.find()只在标记名上工作，这正是我想要做的。

编辑:如果选择了链接所代表的卡，我想向<a></a>添加一个类(如.current-card)。

Answer 1

从您的回答中，我们不清楚选择的卡片是如何在模型中指定的，所以我假设card对象(ng-repeat的每次迭代的对象)持有这个标志，例如：card.isSelected。

然后，可以使用ng-class根据这个值指定要添加的CSS类：

<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>

增编：

关于.find("a")为什么返回空的最初问题的答案是，因为ngRepeat指令转换了它的内容(这意味着在编译期间将元素从DOM中删除)，并将其放置在比link函数更晚的阶段。