定义指令时,“控制器”,“链接”和“编译”功能之间的区别

有些地方似乎将控制器功能用于指令逻辑,而其他地方则使用链接。 角度主页上的选项卡示例将控制器用于一个,并链接另一个指令。 两者有什么区别?


我将扩展你的问题,并且还包括编译功能。

  • 编译函数 - 用于模板 DOM操作(即,tElement = template元素的操作),因此适用于与指令相关联的模板的所有DOM克隆的操作。 (如果你还需要一个链接函数(或者前后链接函数),并且你定义了一个编译函数,编译函数必须返回链接函数,因为'compile'属性是'link'属性会被忽略定义。)

  • 链接函数 - 通常用于注册监听器回调(即范围中的$watch表达式)以及更新DOM(即iElement =独立实例元素的操纵)。 它在模板被克隆后执行。 例如,在<li ng-repeat...> ,链接函数在<li>模板(tElement)已被克隆(到iElement中)之后执行,用于特定的<li>元素。 $watch允许向指令通知范围属性更改(范围与每个实例关联),这允许指令将更新的实例值呈现给DOM。

  • 控制器功能 - 当另一个指令需要与此指令交互时,必须使用它。 例如,在AngularJS主页上,窗格指令需要将自身添加到由tabs指令维护的范围中,因此tabs指令需要定义窗格指令可以访问/调用的控制器方法(think API)。

    要更深入地了解选项卡和窗格指令,以及为什么tabs指令使用this (而不是$scope )在其控制器上创建函数,请参阅AngularJS控制器中的'this'和$ scope。

  • 通常,您可以将方法$watches等放入指令的控制器或链接函数中。 控制器将首先运行,这有时很重要(当ctrl和link函数运行两个嵌套指令时,请参阅此日志记录)。 正如Josh在评论中提到的,为了与框架的其他部分保持一致,您可能需要将范围操作函数放在控制器中。


    作为对马克答案的补充,编译函数无权访问范围,但链接函数可以。

    我真的推荐这个视频; 由Misko Hevery(AngularJS的父亲)撰写指令,他描述了差异和一些技巧。 (视频中14:41标记的编译功能和链接功能的区别)。


  • 编译前运行代码:使用控制器
  • 编译后运行代码:使用链接
  • Angular约定:在链接中写入控制器和DOM操作的业务逻辑。

    除此之外,您可以从另一个指令的链接函数调用一个控制器函数。例如,您有3个自定义指令

    <animal>
    <panther>
    <leopard></leopard>
    </panther> 
    </animal>
    

    并且您想从“豹”指令的内部访问动物。

    http://egghead.io/lessons/angularjs-directive-communication将有助于了解关于指导间的沟通

    链接地址: http://www.djcxy.com/p/77903.html

    上一篇: Difference between the 'controller', 'link' and 'compile' functions when defining a directive

    下一篇: Angular sharing data between controllers using service