angularjs - 带有 Replace=false 的 Angular 指令创建非语义的列表 html

Question

我们正在考虑转向使用 replace=false 的指令，因为我听说 replace=true 已被弃用。我不知道如何解决的一个问题是，对于所有基于列表的指令，生成的 html 不是语义的。

例如，列表指令可能是这样的:

<tg-list tg-compact="true">
    <tg-list-item>foo</tg-list-item>
    <tg-list-item>bar</tg-list-item>
</tg-list>

当前(使用 replace=true)编译为:

<ul class="o-list o-list--compact">
    <li class="o-list-item">
        foo
    </li>
    <li class="o-list-item">
        bar
    </li>
</ul>

使用 replace=false 我们最终会得到:

<tg-list class="o-list-icon o-list-icon--compact">
    <ul>
        <tg-list-item>
            <li class="o-list-item">foo</li>
        </tg-list-item>
        <tg-list-item>
            <li class="o-list-item">bar</li>
        </tg-list-item>
    </ul>
</tg-list>

或:

<tg-list class="o-list-icon o-list-icon--compact">
    <tg-list-item>foo</tg-list-item>
    <tg-list-item>bar</tg-list-item>
</tg-list>

第一个不好，因为它绝对是非语义的，第二个不好，因为虽然它是“语义的”(如在 html5 中，自定义标签是可以的)，但我们失去了 ul>li 可以给我们的任何东西(一个屏幕例如，读者可能有特殊的方式来对待他们)。

也许我们可以使用 html5 的“Angular 色”属性？但如果是这样，我认为列表项需要将 Angular 色添加到链接函数中的元素？

不知道，但是你们是怎么解决这个问题的？

Answer 1

您可以配置指令，将 restrict 设置为 A，代表属性。这样您就可以将其用作:

<ul tg-list tg-list-compact=true>
    <li tg-list-item>
        foo
    </li>
    <li tg-list-item>
        bar
    </li>
</ul>