这个链接函数如何知道“tabsCtrl”引用了什么?

时间:2013-11-20 22:04:17

标签: javascript angularjs

当我在标题为“创建Directives that Communicate”的部分中看到这条信息时,阅读AngularJS文档...进一步查看此示例的js代码,我们看到它们传递了一个引用在不同的指令中使用的控制器,但是他们没有解释它为什么工作或如何正确使用它(什么干草,男人?)。

那么为什么它会这样运作?如果我的指令没有链接在一起/在单独的文件中,它会工作吗?如果他们都注册到不同地方的模块怎么样?这似乎是一个奇怪的地方..

link: function(scope, element, attrs, tabsCtrl) {
    tabsCtrl.addPane(scope);

Tl; DR它如何知道tabsCtrl引用了什么?

1 个答案:

答案 0 :(得分:2)

答案在文档中:

  

myPane指令有一个值为^ myTabs的require选项。当一个   指令使用此选项,$ compile将抛出错误,除非   找到指定的控制器。 ^前缀表示该指令   在其父节点上搜索控制器(没有^前缀,   指令只在它自己的元素上寻找控制器。)

     

那myTabs控制器来自哪里?指令可以指定   控制器使用毫不奇怪的命名控制器选项。就像你一样   可以看到,myTabs指令使用此选项。就像   ngController,此选项将控制器附加到模板   指令。

     

回顾myPane的定义,注意其中的最后一个参数   链接功能:tabsCtrl。当指令需要控制器时,它   接收该控制器作为其链接功能的第四个参数。   利用这一点,myPane可以调用addPane函数   myTabs。

将其翻译为人类语言:require: '^myTabs' myPane中的myTabs搜索myTabs中的控制器(嗯,myPane应该是link: function()指令的父指令,将其作为第四个参数传递给myPane中的{{1}}。