问题描述
我需要在范围和模板,执行某些操作。看来,我能做到这一点在任何链接
函数或控制器
函数(因为都可以访问的范围内)
I need to perform some operations on scope and the template. It seems that I can do that in either link
function or the controller
function ( since both have access to the scope )
当它是这样,当我不得不使用链接
功能,而不是控制?
When is it the case when I have to use link
function and not the controller ?
angular.module('myApp').directive('abc', function($timeout) {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: true,
link: function(scope, elem, attr) { /* link function */ },
controller: function($scope, $element) { /* controller function */ }
};
}
另外,据我所知,链接
是无棱角的世界。所以,我可以使用 $观看
, $消化
和 $适用
。
Also, I understand that link
is the non-angular world. So, I can use $watch
, $digest
and $apply
.
更新
什么是链接
函数的意义是什么? (当我们有控制的话)
What is the significance of link
function ? ( When we had controller already )
推荐答案
我的初始与链接斗争后
和控制器
功能和阅读了不少关于他们的,我觉得我现在有答案了。
After my initial struggle with the link
and controller
functions and reading quite a lot about them, I think now I have the answer.
首先让了解
如何角指令简而言之工作:
-
我们一开始就有一个模板(如字符串或加载到一个字符串)
We begin with a template (as a string or loaded to a string)
VAR templateString ='< DIV我-指令> {{5 + 10}}< / DIV>';
现在,这个 templateString
被包装为角元素
VAR EL = angular.element(templateString);
通过报
,现在我们用 $编译编译
找回链接。 功能。
With el
, now we compile it with $compile
to get back the link function.
变种L = $编译(EL)
下面是什么情况,
-
$编译
遍历整个模板,并收集所有它能够识别的指令。 - 所有被发现的指令是的编译递归和
链接
功能被收集。 - 然后,所有的
链接
功能被包裹在一个新的链接
函数返回→
。
$compile
walks through the whole template and collects all the directives that it recognizes.- All the directives that are discovered are compiled recursively and their
link
functions are collected. - Then, all the
link
functions are wrapped in a newlink
function and returned asl
.
最后,我们提供范围
这个→
(链接)功能,进一步执行包裹链接函数与此范围
及其相应的元素。
Finally, we provide scope
to this l
(link) function which further executes the wrapped link functions with this scope
and their corresponding elements.
L(范围)
这增加了模板
作为一个新节点 DOM
并调用控制器
这增加了它的手表到在范围这是与DOM模板共享。
This adds the template
as a new node to the DOM
and invokes controller
which adds its watches to the scope which is shared with the template in DOM.
比较编译 VS 链接 VS 控制器
Comparing compile vs link vs controller :
-
每一个指令是的编辑只有一次和链接功能保留再利用。因此,如果有适用于指令的所有实例的东西里面应该执行指令的
编译
功能。
Every directive is compiled only once and link function is retained for re-use. Therefore, if there's something applicable to all instances of a directive should be performed inside directive's
compile
function.
现在,编译之后我们有链接
这是同时连接在模板到 DOM 。如此,因此,我们进行的一切,是特定于指令的每个实例。对于例如:附加活动 变异的基础上范围等模板
Now, after compilation we have link
function which is executed while attaching the template to the DOM. So, therefore we perform everything that is specific to every instance of the directive. For eg: attaching events, mutating the template based on scope, etc.
最后,在控制器,就是要提供给被直播和无功而该指令适用于 DOM
(获得后附后)。因此:
Finally, the controller is meant to be available to be live and reactive while the directive works on the DOM
(after getting attached). Therefore:
(1)建立视图后[ V ](即模板)与链接。 $范围
是我们的[ M ]和 $控制器
是我们的[Ç ]中的 MVC
(1) After setting up the view[V] (i.e. template) with link. $scope
is our [M] and $controller
is our [C] in M V C
(2)利用在 2路通过设置与手表的 $范围绑定。
(2) Take advantage the 2-way binding with $scope by setting up watches.
(3) $范围
预计手表在控制器中添加,因为这是在看在运行时的模板。
(3) $scope
watches are expected to be added in the controller since this is what is watching the template during run-time.
(4)最后,控制器
也用于能够相关指令之间进行通信。 (如 myTabs
例如https://docs.angularjs.org/guide/directive)
(4) Finally, controller
is also used to be able to communicate among related directives. (Like myTabs
example in https://docs.angularjs.org/guide/directive)
(5)这是真的,我们可以做这一切在链接
功能为好,但它是关于关注分离。
(5) It's true that we could have done all of this in the link
function as well, but it's about separation of concerns.
所以,最后我们有一个适合所有的作品完美如下:
Therefore, finally we have the following which fits all the pieces perfectly :
这篇关于AngularJS:什么是指令的链接功能的需要时,我们已经有了指令与控制的范围?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!