Добавить элемент DOM при включении, за исключением последнего дочернего элемента

Question

Я хотел бы добавить <hr> Элемент между каждым клоном моей функции transclude, кроме последнего клона.

Родительская директива имеет собственный HTML-шаблон.
В этом шаблоне я вызываю директиву Attribute для включения элементов.

Образец:

function directiveTransclude() {
    return {
        link: function (scope, element, attr, ctrl, transclude) {
            transclude(function (clone, scope) {
                element.append(clone);
            });
        }
    };
}

Эта директива помогает мне вручную обрабатывать transclude.
Я просто должен выяснить, как условно добавить <hr>,
Я предполагаю, что для этого нужно добавить, например, element.append('<hr>'); после первого добавления.

Так, как я мог знать, сколько элементов должно добавить transclude?
Есть ли значение $last или что-то, что говорит мне, что это последний цикл?

Спасибо за помощь!

Answer 1

На случай, если вам интересно:

Уже поздно, но я просто нахожу решение, используя альтернативу (с помощью CSS).

Как уже упоминалось @Aaron Pool, я могу использовать last-child селектор для достижения этого.

last-of-type селектор привередлив, а last-child селектор на самом деле применяется к ребенку

Это лучше (быстрее, чем инъекция DOM, и безопаснее визуально, потому что <hr> может быть легко отредактирован по правилам CSS).

Я уже пробовал это, тем не менее, это не сработало, как ожидалось.
Несмотря на это, сегодня я понимаю, что мой МЕНЬШИЙ код был таким:

&:last-child

Вместо

:last-child

Так что, к сожалению, я сфокусировался не на том элементе DOM.
Я счастлив, даже если сейчас я чувствую себя таким тупым.
Поздравления и счастливого нового года!

Answer 2

Контроллер был создан к моменту запуска функции связывания, поэтому я бы просто отслеживал его в атрибуте контроллера.

В приведенном ниже примере я предполагаю, что вы передаете этой директиве коллекцию для итерации или, по крайней мере, количество элементов, которое вы хотите. Я также предполагаю, что аргумент назван collectionи что вы используете bindToController так что эта привязка директивы доступна на контроллере к этому моменту. Наконец, я предполагаю, что вы также прикрепили к контроллеру атрибут с именем iterationCount,

function directiveTransclude() {
    return {
        link: function (scope, element, attr, ctrl, transclude) {
            ctrl.iterationCount++;
            transclude(function (clone, scope) {
                element.append(clone);
                if(ctrl.iterationCount < (ctrl.collection.length - 1)) {
                  element.append('hr');
                }
            });
        }
    };
}

Хотя, я бы хотел сделать это с помощью CSS, если <hr> не какое-то странное требование. Используя границу и last-child селектор будет НАМНОГО проще.