javascript - jQlite .find() 遍历不工作

Question

我正在使用一个 Angular Directive(指令)，但我对 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>元素。根据docs , .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指令包含它的内容(这意味着 Angular 在编译期间将元素从 DOM 中取出)，并将它放在比你的 link 更晚的阶段。功能。