javascript - 具有多个模板的 AngularJS 指令

Question

任务:

显示联系方式。

联系人是 JSON 数据，比如说 {name: "Mark", location: "England", phone: [...]}。

联系人可以以多种方式显示:紧凑/详细/使用附加信息增强(共享联系人 - 附加指令)

因为联系人可以显示在不同位置的不同页面上，所以很自然地为联系人创建指令(小部件)，但这里有一个问题: “如何用多个模板组织同一个小部件？”

选项:

使用一个模板创建一个指令，隐藏部分
根据联系人“类型” - 可能有很多的大模板
ng-switch 和 ng-if

为每个模板创建指令 - 几乎
相同的指令，只有不同的模板(或 templateURL)

至
load templates dynamically while linking - 有问题
嵌入和替换(合并属性)

你解决这些问题的经验是什么？

Answer 1

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

我在 CodePen 示例中使用的方法利用了一个模板工厂，该工厂通过 Angular DI 注入(inject)到每个指令中。模板工厂实现非常干净，因为它只使用了ng-include。每种不同支持的显示模式(紧凑和详细)的模板字符串。实际的 HTML 模板(部分)可以存放在外部 View 文件或内部脚本 block 中。

使用联系指令很容易:

<contact compact ng-repeat="contact in contacts" ng-model="contact"></contact>

这将创建联系人列表的紧凑版本。

<contact detailed ng-repeat="contact in contacts" ng-model="contact"></contact>

这将创建一个详细的联系人列表。

我承认我还没有将这样的代码部署到生产环境中，所以可能存在我没有考虑到的可扩展性或其他问题。我希望我提供的代码能够回答您的问题，或者至少为进一步探索提供灵感。