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

前端之家收集整理的这篇文章主要介绍了在嵌套和重复的angularjs指令中调用链接函数的顺序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我对Javascript编程很新,我只涉及AngularJS.为了评估它,我决定编写一个简单的笔记应用程序.模型非常简单,每个音符都有标签,文本和标签列表.但是,我遇到了在隔离的嵌套指令范围之间传递数据的问题.

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

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

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

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

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

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

> notes指令中的link函数
(将getNote函数添加到notes范围)
>第一个音符的tagger指令中的link函数
(在父笔记范围内调用getTags)函数
>第一个note指令中的link函数
(将getTags添加到范围)
(在父笔记范围内调用getNote)
>第二个音符的tagger指令中的link函数
(在父笔记范围内调用getTags)函数
>第二个note指令中的link函数
(将getTags添加到范围)
(在父笔记范围内调用getNote)

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

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

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

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

问候

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

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

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

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

directive1: compile

directive2: compile



directive1:控制器

directive1:预链接

directive2: controller

directive2: pre-link

directive2: post-link



directive1:post-link

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

原文链接:https://www.f2er.com/angularjs/143890.html

猜你在找的Angularjs相关文章