3

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

4

1 回答 1

0

从您的回答中，尚不清楚如何在模型中指定所选卡片，因此我假设该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函数更晚的阶段。

于 2015-08-08T22:29:26.770 回答