带有多个模板的AngularJS指令

Question

任务：

• 显示联系人。
• 联系人是JSON数据，比方说{名称：“ Mark”，位置：“ England”，电话：[...]}。
• 联系人可以通过多种方式显示：紧凑/详细/增强，带有附加信息（共享联系人-附加指令）

因为联系人可以显示在不同位置的不同页面上，所以自然会为联系人创建指令（小部件），但这是一个问题：“如何使用多个模板来组织相同的窗口小部件？”

选项：

1. 使用一个模板创建一个指令，该指令隐藏了部分根据联系人的“类型”-可能有很多ng-switch和ng-if
2. 每个模板的创建指令-几乎相同的指令，仅包含不同的模板（或templateURL）]]
3. 至load templates dynamically while linking
-存在问题包含和替换（合并属性）

您对解决这些问题有何经验？

任务：显示联系人。联系人是JSON数据，比方说{名称：“ Mark”，位置：“ England”，电话：[...]}。可以多种方式显示联系方式：紧凑/详细/增强了其他信息...

Answer 1

我个人认为选项2在显示模式之间提供了清晰的分隔。我创建了一个working CodePen example来说明如何通过对每个模板使用单独的指令来干净地完成此操作。

Answer 2

[我已经建立了一种新的方法来处理Adam示例，并且还使用了有角度文档中的示例，在该示例中他们讨论了templateUrl属性https://docs.angularjs.org/guide/directive中的函数，这是有角度文档中的工具：http://plnkr.co/edit/h2CSf2WqCLYfPvzL9WQn?p=preview