AngularJS：ngInclude vs指令

这一切都取决于你想从你的代码片段。就个人而言，如果代码没有任何逻辑，或者甚至不需要一个控制器，那么我去ngInclude。我通常放大量更多的“静态”html碎片，我不想让这里的视图混乱。 (即：假设一个大型表，其数据来自父控制器，它的清理工作比< div ng-include =“bigtable.html”/>要清楚，

如果有逻辑，DOM操作，或者你需要它可以在不同的实例中被定制(不同的渲染)，那么指令是更好的选择(他们首先是令人畏惧的，但它们非常强大，给予时间)。

ngInclude

有时你会看到ngInclude的受外部$ scope / interface影响。如大/复杂的中继器说。这2个接口连接在一起。如果main $ scope中的某些内容发生更改，则必须在包含的部分内更改/更改逻辑。

指令

另一方面，指令可以有显式的作用域/控制器等。所以，如果你想到一个场景，你必须重复使用的东西多次，你可以看到如何有自己的范围连接，将使生活更容易和安静。少混淆。

此外，任何时候你将要与DOM进行交互，你应该使用一个指令。这使它更好地测试，并解耦这些操作远离控制器/服务/ etc，这是你想要的！

提示：确保不要使用restrict：’E’，如果你关心IE8！有这方面的方法，但他们是恼人。只是让生活更容易，坚持属性等。 < div my-directive />

组件[更新时间：3/1/2016]

在Angular 1.5中添加，它本质上是一个.directve()的包装器。组件应该在大部分时间使用。它删除了很多样板指令代码，默认情况下像restrict：’E’，scope：{}，bindToController：true。我强烈建议使用这些几乎一切在你的应用程序，以便能够更容易地转换到Angular2。

结论是：

你应该创建组件&指令在大多数时间。

>更可扩展
>你可以模板并让你的文件在外部(如ngInclude)
>您可以选择使用父作用域，或者它在指令中自己隔离作用域。
>在您的应用程序中更好地重复使用

更新3/1/2016

现在Angular 2正在慢慢地包装，我们知道一般的格式(当然还有一些变化在这里和那里)只是想添加组件的重要性(有时指令，如果你需要他们限制： ‘E’)。

组件与Angular 2的@Component非常相似。这样，我们封装了逻辑& html在同一区域。

确保你封装了尽可能多的东西，你可以在组件，它将使转换到Angular 2更容易！ (如果您选择进行转换)

这里是一个很好的文章描述这个迁移过程使用指令(非常类似，如果你打算使用组件当然)：http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/