93

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

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

4

1 回答 1

122

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

如果有逻辑、DOM 操作，或者您需要它在不同的实例中可定制（也就是以不同的方式呈现），那么directives是更好的选择（一开始它们令人生畏，但它们非常强大，给它时间） .

包括

有时您会看到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）
  • 您可以选择使用父范围，或者它自己在指令中的隔离范围。
  • 在整个应用程序中更好地重复使用

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/

于 2014-06-11T20:29:55.787 回答