在嵌套和重复的angularjs指令中调用链接函数的顺序

pos*_*4th 9 angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

我是Javascript编程的新手,我只涉及AngularJS.为了评估它,我决定编写一个简单的笔记应用程序.模型非常简单,每个音符都有标签,文本和标签列表.但是,我遇到了在隔离的嵌套指令范围之间传递数据的问题.

我有三个指令,注释,注释和标记(定义具有相同名称的新元素).他们每个人都使用一个孤立的范围.

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

note指令使用tagger元素"呈现"标记列表.

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

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

据我了解,问题是指令的链接函数以不一致的顺序调用.调试应用程序显示链接函数按以下顺序调用:

  1. notes指令中的link函数(将getNote函数添加到notes作用域)

  2. 第一个音符的tagger指令中的link函数(在父音符作用域中调用getTags)函数

  3. 第一个note指令中的link函数(将getTags添加到作用域)(在父笔记作用域中调用getNote)

  4. 第二个音符的tagger指令中的link函数(在父音符作用域中调用getTags)函数

  5. 第二个note指令中的link函数(将getTags添加到作用域)(在父笔记作用域中调用getNote)

这不起作用,因为在#2中,第一个音符的范围还没有getTags函数.

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

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

(我在tagger指令中使用$ watch on getTags解决了问题...)

问候

Tay*_*aye 18

引用乔什·D·米勒(Josh D. Miller)对我遇到的类似问题做出了友好的回应:

"只需要几个技术说明.假设你有这个标记:

<div directive1>
  <div directive2>
    <!-- ... -->
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

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

directive1:编译

指令2:编译

directive1:控制器

directive1:预链接

指令2:控制器

指令2:预链接

指令2:后链接

directive1:post-link

默认情况下,直接"链接"函数是一个后链接,因此外部指令1的链接函数在内部指令2的链接函数运行之后才会运行.这就是为什么我们说在后链接中进行DOM操作是唯一安全的."

  • 嗨@Tahir感谢您的回答.也许我很愚蠢但是,正如我的plunker所见,我有:<notes> <note> <tagger> </ tagger> </ note> </ notes>但链接函数调用顺序是<notes>,<tagger> ,<note> ...而<tagger>,<note>,<notes>会根据你的回答而得到...对不起,如果我是傻瓜:-) (3认同)