AngularJS:ngInclude vs指令

前端之家收集整理的这篇文章主要介绍了AngularJS:ngInclude vs指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不太明白什么时候使用指令,什么时候更适合使用nginclude。以这个例子:我有一个部分,password-and-confirm-input-fields.html,这是用于输入和确认密码的html。我在注册页面和更改密码页面下使用。这两个页面都有一个控制器,部分html没有专用控制器。

我应该使用指令还是ngInclude?

这一切都取决于你想从你的代码片段。就个人而言,如果代码没有任何逻辑,或者甚至不需要一个控制器,那么我去ngInclude。我通常放大量更多的“静态”html碎片,我不想让这里的视图混乱。 (即:假设一个大型表,其数据来自父控制器,它的清理工作比< div ng-include =“bigtable.html”/>要清楚,

如果有逻辑,DOM操作,或者你需要它可以在不同的实例中被定制(不同的渲染),那么指令是更好的选择(他们首先是令人畏惧的,但它们非常强大,给予时间)。

ngInclude

有时你会看到ngInclude的受外部$ scope / interface影响。如大/复杂的中继器说。这2个接口连接在一起。如果main $ scope中的某些内容发生更改,则必须在包含的部分内更改/更改逻辑。

指令

另一方面,指令可以有显式的作用域/控制器等。所以,如果你想到一个场景,你必须重复使用的东西多次,你可以看到如何有自己的范围连接,将使生活更容易和安静。少混淆。

此外,任何时候你将要与DOM进行交互,你应该使用一个指令。这使它更好地测试,并解耦这些操作远离控制器/服务/ etc,这是你想要的!

提示:确保不要使用restrict:’E’,如果你关心IE8!有这方面的方法,但他们是恼人。只是让生活更容易,坚持属性等。 < div my-directive />

组件[更新时间:3/1/2016]

在Angular 1.5中添加,它本质上是一个.directve()的包装器。组件应该在大部分时间使用。它删除了很多样板指令代码,默认情况下像restrict:’E’,scope:{},bindToController:true。我强烈建议使用这些几乎一切在你的应用程序,以便能够更容易地转换到Angular2。

结论是:

你应该创建组件&指令在大多数时间。

>更可扩展
>你可以模板并让你的文件在外部(如ngInclude)
>您可以选择使用父作用域,或者它在指令中自己隔离作用域。
>在您的应用程序中更好地重复使用

更新3/1/2016

现在Angular 2正在慢慢地包装,我们知道一般的格式(当然还有一些变化在这里和那里)只是想添加组件的重要性(有时指令,如果你需要他们限制: ‘E’)。

组件与Angular 2的@Component非常相似。这样,我们封装了逻辑& html在同一区域。

确保你封装了尽可能多的东西,你可以在组件,它将使转换到Angular 2更容易! (如果您选择进行转换)

这里是一个很好的文章描述这个迁移过程使用指令(非常类似,如果你打算使用组件当然):http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/

猜你在找的Angularjs相关文章