Question

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

父指令具有自定义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

控制器已经在链接函数运行时被实例化，所以我只是在控制器属性中跟踪它。

我在下面的示例中假设您正在通过此指令传递一个集合来迭代，或者至少计算您想要的元素数量。我还假设参数名为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选择器会更简单。

Answer 2

万一你想知道：

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

正如@Aaron Pool所提到的，我可以使用last-child选择器来实现这一点。

last-of-type选择器很挑剔，last-child选择器实际应用于孩子

它更好（比DOM注入更快，视觉上更安全，因为<hr>可以很容易地通过CSS规则进行编辑）。

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

&:last-child

而不是

:last-child

所以我很遗憾地关注错误的DOM元素即使现在我感到很愚蠢，我也很开心问候和新年快乐！

在转录时添加DOM元素，除了最后一个孩子

2 个答案: