AngularJS：ngInclude vs 指令

Posted 2023-02-19

【中文标题】AngularJS：ngInclude vs 指令

【英文标题】：AngularJS: ngInclude vs directive

【发布时间】：2014-08-02 00:57:42

【问题描述】：

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

我应该使用指令还是ngInclude？

【问题讨论】：

我每次都会使用指令，但我很好奇更有经验的 Angular 人会怎么说。

如果它真的是一个独立的组件，它可能应该有它自己的控制器与之关联。 IMO，我会使用部分 - 但是，我很好奇更多的输入

如果该部分需要任何 js 代码，请使用指令。如果只是 HTML，请使用 ngInclude。

【参考方案1】：

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

如果存在逻辑、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） 您可以选择使用父作用域，也可以选择在指令中使用它自己的

isolate

作用域。 在整个应用程序中更好地重复使用

---

---

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/

【讨论】：

我同意这个答案。指令的学习曲线很陡峭，但一旦你掌握了它就会真正得到回报。

@mcpDESIGNS，一个可能不完全符合这个答案的案例（至少不是前两段）。如果我有一个带有自己的控制器的导航部分，并且我只会使用一次（在 index.html 文件中），那么这可能应该是部分而不是指令，因为它只使用一次（它是一种单独的应用程序，因为它不包含在 ngview 中），即使它有自己的逻辑。还是？

这个还是比较混乱。。你也可以在使用ngInclude的时候指定一个控制器，看这个：***.com/questions/13811948/…

当然可以，但它总是以某种方式完全连接到父控制器。当加载模板时，指令可以在其自身内创建一个控制器。它可以完全分开（如果你愿意）

你能做的最好的事情就是把这个概念抽象成一个工厂或其他东西，这样你就可以从link函数中调用它，瞧！毫无疑问，它会很好地融入指令中:(@Arwin