指令列表和嵌入答案

【问题标题】：List of directives and transclusion指令列表和嵌入
【发布时间】：2015-08-12 06:07:55
【问题描述】：

我正在尝试构建一些导航指令来隔离复杂性。我想要以下 HTML 来呈现我的导航：

<custom-nav>
    <nav-item>Item 1</nav-item>
    <nav-item>Item 2</nav-item>
    <nav-item>Item 3</nav-item>
</custom-nav>

如果我现在编写指令，生成的编译 HTML 将如下所示：

<custom-nav>
    <nav>
        <ul>
            <nav-item><li><a>Item 1</a></li></nav-item>
            <nav-item><li><a>Item 2</a></li></nav-item>
            <nav-item><li><a>Item 3</a></li></nav-item>
        </ul>
    </nav>
</custom-nav>

但是，这是无效的 HTML（<ul>s 只能有 <li>s 作为子级）。

不使用replace: true，我解决这个问题的最佳方法是什么？我能想到的只有：

不要使用 <ul> 或 <li> - 使用 aria 角色来定义我自己的列表项。
不要使列表在语义上成为列表。我真的不想这样做。

有什么我忽略的吗？

【问题讨论】：

指令中不推荐使用替换，因此如果您能提供帮助，我不会使用它。
只用指令替换基本标签，这里没什么特别的。
@MatthewGreen 所以我的问题！
@dfsq，你能详细说明一下吗？

标签： angularjs html angularjs-directive semantic-markup

【解决方案1】：

我不确定我是否正确理解了这个问题，但我能说的是，您可以将要用作 li 的项目传递给数组，作为指令的参数，并在链接函数中对其进行循环以生成推荐的 html 结果，这将消除与问题相关的任何复杂性如果我误解了你，请告诉我。祝你好运

【讨论】：

这不是“以角度方式”做事。这也许就是你在一两年前想要使用 Angular 1.0 或 1.2 的方式。