使用元素指令时，我看到Angular元素指令有两种使用方式：
1。作为块级组件
元素的样式为display:block，是组件，其子元素是组件的子元素，因此元素本身就是组件。
使用指令：
<example class="Example"></example>
指令＆lt; html：
<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>
2。作为组件的内联包装
该元素保留为display:inline，并有效地充当组件本身的隐形包装器：
使用指令：
<example></example>
指令＆lt; html：
<div class="Example">
<header class="Example-header"></header>
<img class="Example-image">
<footer class="Example-footer"></footer>
</div>
显然每个都有优点和缺点，例如额外的标记，由于内联元素等导致的布局上下文丢失等，但是正确的方法吗？或者这是Angular的另一个变幻莫测？
答案 0 :(得分：2)
我很惊讶没有人回复，但创建自定义指令背后的想法是能够创建可重用的代码片段，以满足您网站上的特定功能。
但是，此功能并不关心您要使用的样式。您当然可以在Angular中有条件地更改类和样式，但处理框架时的核心组件是数据。
话虽如此，在你的问题中加粗，没有“正确的方法”。制定指令以满足您的网站需求和风格。
答案 1 :(得分：1)
首先这可能是基于意见的，但我真的想分享我对此的看法。
如果你真的遵循做指令的角度方式，那么这些都不是正确的方法。
指令旨在向HTML元素添加行为。
指令越少添加HTML就越好，因为它可以让你更好地控制这个元素。
让我们举一个例子。
我们有一个数据网格（比方说ui-grid，它并不重要）
<ui-grid ...>
...
</ui-grid>
我有一个想法是添加一些按钮来添加或删除网格中的元素。 我第一次想出了这个
<ui-grid ...>
...
</ui-grid>
<button ng-click="addItem()">Add</button>
<button ng-click="removeItem()">Remove</button>
我对此非常满意，这没关系，但最后我需要在其他一些视图中使用这些按钮。我将不得不复制HTML，复制JS并使其适应集合。
这显然不是一个好主意。
相反，我会做一个指示。让我们说“按钮列表”：它产生相同的HTML和行为。
<ui-grid ...>
...
</ui-grid>
<button-list></button-list>
这很酷。
现在我有一些需要。在一个视图中我需要添加按钮为蓝色，在另一个视图上我不需要有删除按钮，在最后一个我希望按钮文本为“X”和“+”（这是一些客户要求提供真实的故事。）
我可以使用选项等列表制作一个大对象...但这非常痛苦，每次需要添加自定义不同的小行为时都需要触摸指令。
现在让我们再想一想我想做什么。
我希望按钮与网格交互......这就是全部。这就是我们应该如何构建自定义指令。
然后我们可以这样生成这个指令：
<div grid-button-container collection="mycollection">
<ui-grid ...>
...
</ui-grid>
<button grid-add-item>Add</button>
<button grid-remove-item>Remove</button>
</div>
那么我们在这里有什么？我们有三种不同的指令。
grid-add-item和grid-remove-item都需要使用grid-button-container。
我无法描述这个的所有实现（这需要太长时间），但我认为这是应该如何使用指令。比如几乎没有角度内置指令（ng- *）添加HTML并只添加一个行为我认为所有指令都应该以这种方式构建。
亲：
缺点：
为了说明问题，你要问的两种方式是不同的。没有人比另一个更好，它只依赖于你自己的HTML组织，它将取决于指令的使用。
希望它有所帮助。