AngularJS:nginclude VS指令 [英] AngularJS: nginclude vs directive

查看:147
本文介绍了AngularJS:nginclude VS指令的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不明白何时使用指令,当它会更适合使用nginclude。就拿这个例子:我有一个局部的,密码和确认输入-fields.html,这是用于输入和确认密码的HTML。我用这两个下​​注册页面,并在更改密码页。这两个页面有一个控制器的每个,部分HTML有没有专门的控制器。

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.

我应该使用指令或nginclude此?

Should I use directive or nginclude for this?

推荐答案

这一切都取决于你从code片段想要什么。就个人而言,如果code没有任何逻辑,或者甚至不需要控制器,然后我去与 ngInclude 。我通常把大量更静的HTML,我不想在这里塞满了看法片段。 (即:假设有一张大桌子谁的数据来自父控制器反正这是清洁有< D​​IV NG-包括=bigtable.html/> 比。所有这些塞满了视图)行

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 who's 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)

如果有逻辑,DOM操作,或者你需要它是可定制(又名呈现不同),在不同的情况下,它的使用,那么指令是更好的选择(他们'重新在第一望而生畏,但他们是非常强大的,给它时间)。

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的由他们的外表 $范围影响 / 接口。如大/复杂的中继器可以说。这2个接口都系因为这个在一起。在您包括部分如果发生在主 $范围更改,必须修改/改变你的逻辑。

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.

在另一方面,指令的可以的有明确的范围/控制器/等,所以,如果你正在考虑这样一个场景,你不得不重复使用的东西多次的,你可以看到有它自己的范围将连接使生活更轻松和放大器;少混乱。

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.

此外,任何时候你将要与DOM在所有互动,你应该使用一个指令。这使得它更好的测试,并使这些行动远离控制器/服务/等等,这是你想要的东西!

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!

提示:确保的 不可以 的使用限制:'E'如果你关心IE8!这种情况有解决办法,但他们是讨厌。只是让生活更轻松,带属性的/ etc坚持下去。 &LT; D​​IV我-指令/&GT;

在增加1.5角,它本质上是围绕包装.directve()。部件应使用的大部分时间。它消除了许多样板指令code的,由违约的事情,比如限制:'E',范围:{},bindToController:真正的。我强烈建议使用这些几乎一切都在你的应用程序,以便能够更轻松地过渡到Angular2。

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.

您应该创建的元件及放大器;指令的大部分时间。

You should be creating Components & Directives a majority of the time.


  • 更可扩展

  • 您可以模板,让您的文件在外部(如ngInclude)

  • 您可以选择使用父范围,或者它自己的分离指令内的范围。

  • 整个应用程序中更好地重复使用

  • 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

现在该角2正在慢慢结束了,我们知道一般的格式(当然还会有一些变化在这里和那里)只是想补充是多么重要做组件(有时,如果你需要他们的指令限制:'E'为例)。

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).

组件非常的类似的到2角的 @Component 。通过这种方式,我们封装逻辑放大器; HTML在同一地区。

Components are very similar to Angular 2's @Component. In this way we are encapsulating logic & html in the same area.

请确保你可以在你的指令作为封装很多事情,这将过渡到2角容易得多! (如果你选择,使过渡)

Make sure you encapsulate as many things as you can in directives, it will make the transition to Angular 2 that much easier! (If you choose to make the transition)

下面是一个使用指令描述这个迁移过程中一个很好的文章:<一href=\"http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/\">http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/

Here's a nice article describing this migration process using directives : http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/

这篇关于AngularJS:nginclude VS指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆