AngularJS:ngInclude vs指令

Question

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

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

Answer 1

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

如果有逻辑,DOM操作,或者你需要它在不同的实例中可以自定义(也就是呈现方式不同),那么directives它们是更好的选择(它们起初令人生畏,但它们非常强大,给它时间) .

ngInclude

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

指令

另一方面,指令可以有明确的范围/控制器/等等.因此,如果你想到一个你必须多次重复使用的场景,你可以看到如何连接它自己的范围将使生活更轻松,更少混乱.

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

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

组件 [Update 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/