除最后一个 child 外，嵌入时添加 DOM 元素

Question

我想在我的嵌入函数的每个克隆之间添加一个 <hr> 元素，除了最后一个克隆。

parent 指令有一个自定义 HTML 模板。
在这个模板中，我调用了一个 Attribute 指令来嵌入元素。

样本：

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

这个指令帮助我手动处理嵌入。
我现在只需要弄清楚如何有条件地添加 <hr>.
我假设这样做我需要在第一次追加之后添加例如 element.append('<hr>'); 。

那么我怎么知道嵌入必须附加多少个元素？
是否有 $last 值或其他信息告诉我这是最后一个循环？

感谢您的帮助！

Answer 1

控制器在 link 函数运行时已经实例化，所以我会在控制器属性中跟踪它。

我假设在下面的示例中，您正在向此指令传递一个要迭代的集合，或者至少是您想要的元素数量。我还将假设该参数被命名为 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');
                }
            });
        }
    };
}

不过，如果 <hr> 不是某种奇怪的要求，我的建议是使用 css 来执行此操作。使用边框和 last-child 选择器会简单得多。

Answer 2

万一你想知道：

已经晚了，但我只是通过使用替代方法（CSS）找到了解决方案。

如@Aaron Pool 所述，我可以使用 last-child 选择器来实现。

the last-of-type selector is finicky, and the last-child selector is actually applied to the child

更好（比 DOM 注入速度更快，视觉上更安全，因为 <hr> 很容易被 CSS 规则编辑）。

我已经试过了，但是它没有按预期工作。
尽管如此，今天我发现我的 LESS 代码是：

&:last-child

而不是

:last-child

所以很遗憾，我关注的是错误的 DOM 元素。
我很开心，即使现在我觉得自己很笨。
新年快乐！

除最后一个 child 外，嵌入时添加 DOM 元素

Add DOM element when transcluding except for the last one child

javascript

angularjs

angularjs-directive

angularjs-ng-transclude