jQlite .find() 遍历不工作

Question

我正在使用 angular 指令，但我对 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>

VIEW

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

我只想遍历 <a> 个元素。根据 docs，.find() 仅适用于标签名称，这正是我想要做的。

编辑：如果选择了 link 代表的卡片（如 .current-card）

，我想向 <a></a> 添加一个 class

Answer 1

根据您的回答，不清楚如何所选卡片在模型中指定，因此我假设 card 对象（每次迭代的对象ng-repeat) 持有此标志，例如：card.isSelected.

然后，您可以使用ng-class指定根据此值添加哪个CSS class：

<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") returns 为空的原始问题的答案，是因为 ngRepeat 指令嵌入了它的内容（这意味着 Angular 将元素取出DOM 在编译期间），并将其放置在 link 函数之后的阶段。

jQlite .find() 遍历不工作

jQlite .find() traversing not working

javascript

angularjs

jqlite