jQlite .find() 遍历不起作用答案

【问题标题】：jQlite .find() traversing not workingjQlite .find() 遍历不起作用
【发布时间】：2015-08-08 21:56:49
【问题描述】：

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

【问题讨论】：

问题很可能出在ng-repeat - 尝试删除它以查看您会找到<a>。为什么要做DOM遍历？可能还有其他方法。
正是...ng-repeat 将其模板（<li><a></a></li>）从 DOM 中取出（将其包含在内），并且仅在其 $watchCollection 的 @987654335 的 $watchCollection 的链接阶段之后将其放在那里@array 被触发，这就是你没有看到它的原因。（非常好的问题，顺便说一句，+1）
你们都对ng-repeat 是问题所在。如果选择了链接代表的卡片（如.current-card），我想向<a></a> 添加一个类。所以我将<li> 放在视图中，然后在模板中添加<a>。 ng-repeat 指令是一种好习惯吗？
@DiegoHernandez，您应该编辑问题以添加您的最终目标。使用ng-class 指令，解决方案可能很简单。是的，它是ng-repeat 的好习惯 - 这就是它的用途

标签： javascript angularjs jqlite

【解决方案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 函数。

【讨论】：