AngularJS:ng Include vs directive

时间:2014-06-11 20:21:29

标签: angularjs angularjs-directive angularjs-ng-include

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

我应该使用指令还是ngInclude

1 个答案:

答案 0 :(得分:120)

这完全取决于您对代码片段的要求。就个人而言,如果代码没有任何逻辑,或者甚至不需要控制器,那么我选择ngInclude。我通常会添加更多“静态”html片段,我不想在这里混淆视图。 (即:假设一个大表的数据来自父控制器。无论如何,<div ng-include="bigtable.html" />比使所有那些线条混乱的视图更清晰。

如果存在逻辑,DOM操作,或者你需要在不同的实例中使用它来进行自定义(也就是渲染方式不同),那么directives是更好的选择(它们起初令人生畏,但它们'非常强大,给它时间)。

ngInclude

有时,您会看到受其外部ngInclude's / $scope影响的interface。比如说大型/复杂的中继器。因此,这两个接口连接在一起。如果主$scope中的某些内容发生更改,则必须在所包含的部分中更改/更改逻辑。

<强>指令

另一方面,指令可以具有明确的范围/控制器/等等。因此,如果你想到一个你必须多次重用某些东西的场景,你可以看到它自己的范围连接将使生活更轻松和不那么容易混淆。

此外,任何时候你都要与DOM交互,你应该使用一个指令。这样可以更好地进行测试,并将这些操作与控制器/服务/等分离,这是您想要的!

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

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

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

总结:

您应该创建组件&amp;指令大部分时间。

  • 更具扩展性
  • 您可以模板化并在外部使用您的文件(例如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/