AngularJS:ngInclude 与指令 [英] AngularJS: ngInclude vs directive
问题描述
我不太明白什么时候使用指令，什么时候使用 nginclude 更合适.以这个例子为例:我有一个部分的 password-and-confirm-input-fields.html，它是用于输入和确认密码的 html.我在注册页面和更改密码页面下都使用它.这两个页面各有一个控制器，部分html没有专用控制器.
我应该为此使用指令还是ngInclude?
这完全取决于您希望从代码片段中获得什么.就个人而言，如果代码没有任何逻辑，或者甚至不需要控制器，那么我会使用 ngInclude.我通常会放置更大的静态"html 片段，我不想在这里弄乱视图.(即:假设有一个大表，其数据无论如何都来自父控制器.<div ng-include="bigtable.html"/> 比所有这些行杂乱无章更干净查看)
如果有逻辑、DOM 操作，或者您需要在使用它的不同实例中对其进行自定义(也就是以不同方式呈现)，那么 directives 是更好的选择(它们起初令人生畏，但它们非常强大，给它时间).
ngInclude
有时您会看到 ngInclude's 受到其外部 $scope/interface 的影响.例如大型/复杂的中继器可以说.因此，这两个接口被捆绑在一起.如果主 $scope 中的某些内容发生更改，您必须在包含的部分中更改/更改您的逻辑.
指令
另一方面，指令可以具有明确的作用域/控制器等.因此，如果您正在考虑必须多次重用某些东西的场景，您可以看到如何拥有它自己的范围连接将使生活更轻松&不那么混乱.
此外，无论何时您要与 DOM 进行交互，都应该使用指令.这使其更适合测试，并将这些操作与控制器/服务/等分离，这是您想要的！
提示:如果您关心 IE8，请确保不要使用限制:'E'！有办法解决这个问题，但它们很烦人.只是让生活更轻松并坚持使用属性/等.
组件 [更新 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/
I do not quite understand when to use a directive and when it would be more appropriate to use nginclude. Take this example: I have a partial, password-and-confirm-input-fields.html, that is the html for entering and confirming a password. I use this both under signup-page and under change-password-page. Those two pages has a controller each, the partial html has no dedicated controller.
Should I use directive or ngInclude for this?
It all depends on what you want from your code fragment. Personally, if the code doesn't have any logic, or doesn't even need a controller, then I go with ngInclude. I typically put large more "static" html fragments that I don't want cluttering up the view here. (ie: Let's say a large table whose data comes from the parent Controller anyway. It's cleaner to have <div ng-include="bigtable.html" /> than all those lines cluttering up the View)
If there is logic, DOM manipulation, or you need it to be customizable (aka render differently) in different instances it's used, then directives are the better choice (they're daunting at first, but they're very powerful, give it time).
ngInclude
Sometimes you will see ngInclude's that are affected by their exterior $scope / interface. Such as a large/complicated repeater lets say. These 2 interfaces are tied together because of this. If something in the main $scope changes, you must alter / change your logic within your included partial.
Directives
On the other hand, directives can have explicit scopes / controllers / etc. So if you're thinking of a scenario where you'd have to reuse something multiple times, you can see how having its own scope connected would make life easier & less confusing.
Also, anytime you are going to be interacting with the DOM at all, you should use a directive. This makes it better for testing, and decouples these actions away from a controller / service / etc, which is something you want!
Tip: Make sure not to use restrict: 'E' if you care about IE8! There are ways around this, but they are annoying. Just make life easier and stick with attribute/etc. <div my-directive />
Components [Update 3/1/2016]
Added in Angular 1.5, it's essentially a wrapper around .directve(). Component should be used most of the time. It removes a lot of boilerplate directive code, by defaulting to things like restrict: 'E', scope : {}, bindToController: true. I highly recommend using these for almost everything in your app, in order to be able to transition to Angular2 more easily.
In conclusion:
You should be creating Components & Directives a majority of the time.
- More extensible
- You can template and have your file externally (like ngInclude)
- You can choose to use the parent scope, or it's own isolate scope within the directive.
- Better re-use throughout your application
Update 3/1/2016
Now that Angular 2 is slowly wrapping up, and we know the general format (of course there will still be some changes here and there) just wanted to add how important it is to do components (sometimes directives if you need them to be restrict: 'E' for example).
Components are very similar to Angular 2's @Component. In this way we are encapsulating logic & html in the same area.
Make sure you encapsulate as many things as you can in components, it will make the transition to Angular 2 that much easier! (If you choose to make the transition)
Here's a nice article describing this migration process using directives (very similar if you were going to use components of course) : http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/
这篇关于AngularJS:ngInclude 与指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
