AngularJS：ngInclude vs指令

Question

我不太了解何时使用指令，何时使用nginclude更合适。以这个示例为例：我有一个局部，password-and-confirm-input- fields.html即用于输入和确认密码的html。我在注册页面和更改密码页面下都使用了它。这两个页面各有一个控制器，部分html没有专用的控制器。

我应该使用指令还是ngInclude为此？

Answer 1

这完全取决于您希望从代码片段中得到什么。就个人而言，如果代码没有任何逻辑，或者甚至不需要控制器，那么我就选择ngInclude。我通常会放置较大的“静态”
html片段，这些片段我不想在这里使视图混乱。（即：假设一个大表，其数据无论如何都来自父Controller。<div ng- include="bigtable.html" />与所有那些凌乱地占据View的行相比，这样做更清洁）

如果存在逻辑，DOM操作，或者您需要在使用的不同实例中对其进行可自定义（也称为不同的渲染），那么directives是更好的选择（起初它们令人生畏，但它们非常强大，请花点时间）
。

ngInclude

有时你会看到ngInclude's许多被其外部影响$scope/
interface。例如大型/复杂的中继器。因此，这两个接口被捆绑在一起。如果主要内容$scope发生变化，则必须在包含的部分中更改/更改逻辑。

指令

另一方面，指令 可以
具有显式的作用域/控制器/等。因此，如果您考虑必须多次重用某些内容的场景，则可以看到连接其自身的作用域如何使生活变得更轻松和更少令人困惑。

另外，无论何时要与DOM进行交互，都应该使用指令。这样可以更好地进行测试，并将这些动作与控制器/服务/等等分离开来，这是您想要的！

提示： 如果您关心IE8，请确保 _ 不要_ 使用限制：“
E”！有很多解决方法，但是很烦人。只是让生活更轻松，并坚持使用属性/等即可。<div my-directive />

组件 [2016年3月1日更新]

在Angular
1.5中添加了，它实际上是的包装.directve()。大部分时间都应该使用组件。默认情况下，它删除了许多样板指令代码restrict: 'E', scope : {}, bindToController: true。我强烈建议对您的应用中的几乎所有内容都使用它们，以便能够更轻松地过渡到Angular2。

结论：

大多数情况下，您应该创建 零部件和指令 。

• 更可扩展
• 您可以模板化并在外部存储文件（例如ngInclude）
• 您可以选择使用父作用域，也可以在指令中使用它自己的 隔离 作用域。
• 更好地在整个应用程序中重复使用

更新3/1/2016

既然Angular
2逐渐发展起来，我们知道通用格式（当然，这里和那里仍然会有一些变化），只是想增加它的重要性components（有时需要限制它们的指令：’例如E’）。

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

确保将尽可能多的内容封装在组件中，这将使向Angular 2的过渡变得更加容易！（如果您选择进行过渡）

这是一篇很好的文章，描述了使用此迁移过程的过程directives（如果您当然要使用组件，则非常相似）：http : //angular-
tips.com/blog/2015/09/migrating-directives-to-angular-2/