嵌套和重复 angularjs 指令中链接函数的调用顺序 [英] Calling order of link function in nested and repeated angularjs directives

问题描述

我对 Javascript 编程还很陌生，我只接触过 AngularJS.为了评估它，我决定编写一个简单的笔记应用程序.该模型非常简单，一个笔记列表，其中每个笔记都有一个标签、一个文本和一个标签列表.但是，我遇到了在嵌套指令的隔离范围之间传递数据的问题.

我有三个指令，notes、note 和 tagger(定义具有相同名称的新元素).他们每个人都使用一个独立的范围.

notes 指令使用 ng-repeat 来渲染"带有 note 元素的每个音符.

note 指令使用 tagger 元素来渲染"标签列表.

note 指令定义范围:{ getNote: "&", ... } 以便将笔记实例从笔记列表传递到笔记控制器/指令.getNote(index) 函数在 note 指令的链接函数中调用.这很好用！

标注器指令定义范围:{ getTags: "&", ... } 以便将给定注释的标签列表传递给标注器控制器/指令.getTags 函数在 tagger 指令的链接函数中调用.这不起作用！

据我所知，问题在于指令的链接函数以不一致的顺序调用.调试应用程序显示链接函数按以下顺序调用:

1. notes 指令中的链接函数(在notes作用域中添加getNote函数)

2. 第一个注释的tagger指令中的link函数(在父笔记范围内调用 getTags)函数

3. 第一个注释指令中的链接函数(将 getTags 添加到范围)(在父注释范围内调用 getNote)

4. 第二个note的tagger指令中的link函数(在父笔记范围内调用 getTags)函数

5. 第二个note指令中的link函数(将 getTags 添加到范围)(在父注释范围内调用 getNote)

这将不起作用，因为在 #2 中，第一个注释的范围还没有 getTags 函数.

一个简单的例子可以在 Plunker 中找到.

因此，我的问题归结为:是什么决定了在嵌套指令中调用链接函数的顺序.

(我在 tagger 指令中的 getTags 上使用 $watch 解决了这个问题...)

问候

解决方案

引用 Josh D. Miller 的话说，他曾亲切地回答了我的类似问题:

"只是一些技术说明.假设您有这个标记:

<div指令2><!-- ... -->

现在 AngularJS 将通过按特定顺序运行指令函数来创建指令:

<块引用>

指令1:编译

<块引用><块引用>

指令2:编译

指令 1:控制器

指令 1:预链接

<块引用><块引用>

指令2:控制器

指令 2:预链接

指令2:后链接

指令 1:后链接

默认情况下，直接的链接"函数是后链接，因此您的外部指令 1 的链接函数在内部指令 2 的链接函数运行后才会运行.这就是为什么我们说只有在 post-link 中进行 DOM 操作才是安全的."

I'm fairly new to Javascript programming and I have only touched upon AngularJS. In order to evaluate it I decided to write a simple note application. The model is really simple, a list of notes where each note has a label, a text and a list of tags. However I ran into problem passing data between isolated scopes of nested directives.

I have three directives, notes, note and tagger (defining new elements with the same names). Each of them using an isolated scope.

The notes directive uses ng-repeat to "render" each one of its notes with the note element.

The note directive uses the tagger element to "render" the list of tags.

The note directive defines scope: { getNote: "&", ... } in order to pass a note instance from the list of notes to the note controller/directive. The getNote(index) function is called in the link function of the note directive. This works fine!

The tagger directive defines scope: { getTags: "&", ... } in order to pass a list of tags for a given note to the tagger controller/directive. The getTags function is called in the link function of the tagger directive. This does not work!

As I understand it, the problem is that the link functions of the directives are called in an inconsistent order. Debugging the application shows that the link functions are called in the following order:

1. link function in the notes directive (adding the getNote function to the notes scope)

2. link function in the tagger directive of the first note (calling getTags in the parent note scope) function

3. link function in the first note directive (adding the getTags to the scope) (calling getNote in the parent notes scope)

4. link function in the tagger directive of the second note (calling getTags in the parent note scope) function

5. link function in the second note directive (adding the getTags to the scope) (calling getNote in the parent notes scope)

This will not work since in #2 the scope of the first note has not yet an getTags function.

A simplistic example can be found in Plunker.

Hence, my question boils down to: What determines the order in which link functions are called in nested directives.

(I solved to the problem using $watch on getTags in the tagger directive...)

regards

解决方案

Quoting Josh D. Miller who had kindly responded to a similar question I had :

" Just a couple of technical notes. Assume that you have this markup:

<div directive1>
  <div directive2>
    <!-- ... -->
  </div>
</div>

Now AngularJS will create the directives by running directive functions in a certain order:

directive1: compile

directive2: compile

directive1: controller

directive1: pre-link

directive2: controller

directive2: pre-link

directive2: post-link

directive1: post-link

By default a straight "link" function is a post-link, so your outer directive1's link function will not run until after the inner directive2's link function has ran. That's why we say that it's only safe to do DOM manipulation in the post-link. "

这篇关于嵌套和重复 angularjs 指令中链接函数的调用顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！