链接 vs 编译 vs 控制器 [英] Link vs compile vs controller

问题描述

当您创建指令时，您可以将代码放入编译器、链接函数或控制器中.

When you create a directive, you can put code into the compiler, the link function or the controller.

在文档中，他们解释说:

In the docs, they explain that:

• 编译和链接函数用于angular的不同阶段循环
• 控制器在指令之间共享

然而，对我来说不清楚，什么样的代码应该去哪里.

However, for me it is not clear, which kind of code should go where.

例如:我可以在编译中创建函数并将它们附加到链接中的作用域，还是只将函数附加到控制器中的作用域?

E.g.: Can I create functions in compile and have them attached to the scope in link or only attach functions to the scope in the controller?

如果每个指令都可以有自己的控制器，如何在指令之间共享控制器?控制器是真正共享的还是只是范围属性?

How are controllers shared between directives, if each directive can have its own controller? Are the controllers really shared or is it just the scope properties?

推荐答案

编译:

这是 Angular 实际编译指令的阶段.对于给定指令的每个引用，此编译函数仅被调用一次.例如，假设您正在使用 ng-repeat 指令.ng-repeat 必须查找它所附加的元素，提取它所附加的 html 片段并创建一个模板函数.

This is the phase where Angular actually compiles your directive. This compile function is called just once for each references to the given directive. For example, say you are using the ng-repeat directive. ng-repeat will have to look up the element it is attached to, extract the html fragment that it is attached to and create a template function.

如果您使用过 HandleBars、下划线模板或等效工具，就像编译它们的模板以提取模板函数一样.向这个模板函数传递数据，该函数的返回值是在正确位置包含数据的 html.

If you have used HandleBars, underscore templates or equivalent, its like compiling their templates to extract out a template function. To this template function you pass data and the return value of that function is the html with the data in the right places.

编译阶段是 Angular 中返回模板函数的那一步.这个 angular 模板函数称为链接函数.

The compilation phase is that step in Angular which returns the template function. This template function in angular is called the linking function.

链接阶段:

链接阶段是您将数据 ( $scope ) 附加到链接函数的地方，它应该返回链接的 html.由于该指令还指定了此 html 的位置或更改的内容，因此已经很好了.这是您要更改链接的 html 的功能，即已附加数据的 html.在 angular 中，如果您在链接函数中编写代码，则它通常是后链接函数(默认情况下).这是一种回调，在链接函数将数据与模板链接后被调用.

The linking phase is where you attach the data ( $scope ) to the linking function and it should return you the linked html. Since the directive also specifies where this html goes or what it changes, it is already good to go. This is the function where you want to make changes to the linked html, i.e the html that already has the data attached to it. In angular if you write code in the linking function its generally the post-link function (by default). It is kind of a callback that gets called after the linking function has linked the data with the template.

控制器:

控制器是您放置一些指令特定逻辑的地方.这个逻辑也可以进入链接函数，但是你必须把这个逻辑放在作用域上以使其可共享".这样做的问题是，你会用你的指令来破坏范围，这并不是真正预期的东西.那么，如果两个指令想要相互交谈/相互合作，有什么替代方案?当然，您可以将所有这些逻辑放入一个服务中，然后使这两个指令都依赖于该服务，但这只会带来更多的依赖.另一种方法是为这个范围提供一个控制器(通常是隔离范围?)，然后当该指令需要"另一个指令时，这个控制器被注入到另一个指令中.有关示例，请参阅 angularjs.org 第一页上的选项卡和窗格.

The controller is a place where you put in some directive specific logic. This logic can go into the linking function as well, but then you would have to put that logic on the scope to make it "shareable". The problem with that is that you would then be corrupting the scope with your directives stuff which is not really something that is expected. So what is the alternative if two Directives want to talk to each other / co-operate with each other? Ofcourse you could put all that logic into a service and then make both these directives depend on that service but that just brings in one more dependency. The alternative is to provide a Controller for this scope ( usually isolate scope ? ) and then this controller is injected into another directive when that directive "requires" the other one. See tabs and panes on the first page of angularjs.org for an example.

这篇关于链接 vs 编译 vs 控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！