AngularJS:ngIninclude 与指令

Question

我不太明白何时使用指令以及何时使用 nginclude 更合适。举个例子:我有一个部分，password-and-confirm-input-fields.html，它是用于输入和确认密码的 html。我在注册页面和更改密码页面下都使用它。这两个页面各有一个 Controller ，部分html没有专用 Controller 。

我应该使用指令还是 ngInclude 来实现此目的吗？

Answer 1

这完全取决于您想要从代码片段中获得什么。就我个人而言，如果代码没有任何逻辑，或者甚至不需要 Controller ，那么我会选择 ngInclude 。我通常会放置更多的“静态”html 片段，我不想让 View 变得困惑。 (即:假设一个大表，其数据无论如何都来自父 Controller 。拥有 <div ng-include="bigtable.html" /> 比所有那些困惑 View 的行更干净)

如果存在逻辑、DOM 操作，或者您需要在使用它的不同实例中对其进行自定义(也称为不同的渲染)，则 directives是更好的选择(一开始它们令人畏惧，但它们非常强大，请给它时间)。

ngInclude

有时你会看到ngInclude's受其外部影响的$scope/interface 。例如大型/复杂的中继器。因此，这两个接口(interface)被捆绑在一起。如果主要有什么$scope更改，您必须更改/更改包含的部分中的逻辑。

指令

另一方面，指令可以具有显式作用域/ Controller /等。因此，如果您正在考虑必须多次重用某些内容的场景，您可以看到如何它自己的连接范围将使生活变得更轻松且更少困惑。

此外，任何时候您要与 DOM 交互时，都应该使用指令。这使得它更好地进行测试，并将这些操作与 Controller /服务/等分离，这正是您想要的!

提示:如果您关心 IE8，请确保不要使用restrict: 'E'!有一些方法可以解决这个问题，但它们很烦人。只是让生活更轻松并坚持属性/等等。 <div my-directive />

组件 [更新 3/1/2016]

在 Angular 1.5 中添加，它本质上是 .directve() 的包装器。大多数时候应该使用组件。它删除了很多样板指令代码，默认为 restrict: 'E', scope : {}, bindToController: true 之类的东西。 。我强烈建议您在应用程序中的几乎所有内容中使用这些，以便能够更轻松地过渡到 Angular2。

结论:

大部分时间您应该创建组件和指令。

• 更具可扩展性
• 您可以模板化并在外部使用您的文件(例如 ngInclude)
• 您可以选择使用父作用域，或其在指令中的隔离作用域。
• 在整个应用程序中更好地重复使用

<小时/><小时/>

更新 2016 年 3 月 1 日

现在 Angular 2 正在慢慢结束，我们知道了一般格式(当然仍然会有一些变化)只是想补充一下这样做的重要性 components (有时如果您需要限制指令，则使用指令:例如“E”)。

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

<小时/>

确保在组件中封装尽可能多的东西，这将使向 Angular 2 的过渡变得更加容易! (如果您选择进行转换)

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