在 Angular JS 模板中，在父元素之间交替，同时保持子元素完整答案

【问题标题】：In Angular JS Templates, alternate between parent elements while keeping children intact在 Angular JS 模板中，在父元素之间交替，同时保持子元素完整
【发布时间】：2016-01-12 04:20:18
【问题描述】：

这感觉像是模板引擎中相当基本的功能，但我似乎不知何故错过了它。

假设这样的模板：

<a ng-if="icon.link" href="icon.link">
    <i ng-class="['fa',icon.icon_class]"></i>
</a>
<span ng-if="!icon.link">
    <i ng-class="['fa',icon.icon_class]"></i>
</span>

这将完成我想要的，但缺点是每当我想有条件地使用不同的父元素时，它都需要复制所有子元素。

有什么办法可以做到：

<span ng-if-include-children="!icon.link">
<a ng-if-include-children="icon.link" href="icon.link">
    <i ng-class="['fa',icon.icon_class]"></i>
</a>
</span>

基本上，我只是想找出最好的方法来换出容器元素，而不是复制其所有内容。

【问题讨论】：

你能分享一个在其他模板引擎中这个常见功能的例子吗？
@miensol，我指的是我所做的所有服务器端模板，其中一个简单的 if/else 可以让您交换父元素而无需重复所有子元素。
我看到了 2xif/else。不确定它是否比复制短内容更好。对于较大的模板，提取部分模板并使用ng-include 加载它通常是值得的。
似乎您正在尝试动态呈现指令，您可以在链接方法中使用$compile(template)(scope)。
感谢您的建议。这个问题出现在更大的模板中，这就是为什么它是一个问题。我认为现在的标准，如果包括孩子在内，将足够好。我也会研究动态指令渲染。我对此并不熟悉。

标签： javascript angularjs

【解决方案1】：

ng-if 和 ng-show/hide 指令发生在节点级别，这意味着如果您不显示父节点，则可以预期子节点也不会显示。

回答您的问题

有什么办法可以做到：

是的，如果您制作自定义指令，但是...

有更好的办法

话虽如此，这更像是一个外观问题，而不是实际的功能问题 - 请在此处查看我对类似问题的回答 https://stackoverflow.com/a/34595198/1121919

【讨论】：

我会说这不是化妆品。这个想法是 HTML 应该是语义的，任何装饰性的东西都会在 CSS 中发生。
在大多数情况下我同意，但在这种情况下，您只有以下选项：a) 复制 DOM，这是最语义化的，您的工作量最少 b) 编写一个指令，它将是最语义化的，句号或 c) 与 CSS 一起使用。您必须问自己，您计划在代码中执行多少次？如果它是一次性应用程序，请使用您的ng-if 解决方案，如果一切都结束了，那么 B 或 C 是您最好的选择。您在这里基本上是在权衡纯粹主义与实用主义。