在 Angularjs 中创建不同类型的新元素的最佳实践是什么？答案

【问题标题】：What are the best practices for creating new elements of different type in Angularjs?在 Angularjs 中创建不同类型的新元素的最佳实践是什么？
【发布时间】：2013-12-13 13:55:49
【问题描述】：

我有一个不同类型的元素列表。每个都有一个切换其可见性的切换。现在有两种方法可以隐藏元素，要么将其从 DOM 中分离出来，要么将可见性设置为隐藏。

据我了解，Angular 仍会更新隐藏元素，因此这可能会影响性能。这是真的？使用 jQuery，可以将元素从 DOM 中分离出来，然后在需要可见时再次附加它。但是这种方法在 Angular 中是否是一种好的做法？

阅读 Angular 文档和它的 API 给我的印象是 Angular 更喜欢在开始时声明所有模板/HTML，并且它们的内容通过控制器动态更改。因此，如果您想添加/删除元素，您将使用 ng-repeat 指令，然后通过从范围内的数组中删除元素，您可以从模板中添加/删除元素。这适用于相同类型的原始元素。但是，如果您有一个不同类型的元素列表，这将如何工作？

已编辑：

http://jsfiddle.net/k26bA

这里的一个例子是可以通过复选框提供的工具列表。在示例中，第一种方法有一个不能动态更改的静态元素列表。这意味着您需要提前知道哪些工具可用。

第二种方法在控制器中有一个列表，您可以在其中添加和删除工具，并在模板中使用ng-repeat 迭代该列表并创建工具。但是，我被困在这里，因为工具可以是按钮、文本字段、复选框甚至是复杂的 div。

我发现这里有一个model first 有点困难，因为这只是隐藏和显示可用控件而不是显示域模型的部分。

我认为的一个很好的例子是谷歌地图，您可以在其中隐藏或最小化地图上的各种控件。

【问题讨论】：

如果您提供一个小提琴哦，您想要实现的目标可能会有所帮助
你没想到model first。您修改模型并让 Angular 管理 DOM 更新。创建演示，概述您正在尝试做的事情。非常不清楚different type 的影响是什么。
我不想给出一个具体的例子，因为我想找到一种 Angular 方法来创建新元素，但我想每种情况都会有所不同。我添加了一个指向小提琴的链接，希望能说明我在寻找什么。

标签： javascript html angularjs

【解决方案1】：

您可能需要熟悉ng-switch directive。 ng-switch 中的非活动项完全从 DOM 中解脱出来，而不是 ng-hide 或 ng-show，它们只是将 CSS 样式设置为显示或隐藏。

【讨论】：

哦，谢谢您指出。不知何故，我错过了这个指令。它看起来像是有条件地将各种元素挂钩到 DOM 的好方法。我遇到了另一个叫做 ng-if 的工具，它可以帮助我隐藏和显示元素。将不同的元素动态添加到某个 div/area 怎么样，你知道 Angular 有什么好的方法吗？使用 ng-switch 和 ng-if 您需要提前知道您将拥有哪些元素。也许我应该为此创建另一个问题，因为您的回答几乎回答了我最初的问题。
是的，ng-if 也不错。我还没有机会使用 1.2 版，所以ng-if 还没有在我的技巧包里。我需要升级我的项目 =) 在此处发布指向您的新问题的链接，我会看看。