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

问题描述

我是相当新的Javascript编程，我只是在AngularJS感动。为了评价它，我决定写一个简单的备忘应用软件。该模型是非常简单的，音符，每个音符都有一个标签，一个文本和标签列表清单。不过，我跑进嵌套指令隔离示波器之间传递数据的问题。

我有三个指令，注释，说明和标注器（定义具有相同名称的新元素）。他们每个人都使用分离的范围。

该票据指令使用NG-重复到渲染的音符与音符元素的每一个。

该说明指令使用的恶搞元素渲染的标记列表。

该说明指令定义范围：{getNote：＆放大器;，...}为了从音符到音符控制器/指令列表传纸条实例。该getNote（指数）函数被调用的说明指令的链接功能。这工作得很好！

打标签指令定义范围：{getTags：＆放大器;，...}为了通过标签列表一个给定的照会恶搞控制器/指令。该getTags函数被调用的恶搞指令的链接功能。这不起作用！

据我了解，问题在于指令的链接函数调用中不一致的顺序。调试应用表明该链接函数被调用顺序如下：

在说明指令

1. 链接功能
   （添加getNote功能的音符范围）


在第一个音符的恶搞指令

2. 链接功能
   （父音符范围调用getTags）函数


在第一个音符指令

3. 链接功能
   （添加到getTags范围内）
   （调用getNote父音符范围）


在第二个音符的恶搞指令

4. 链接功能
   （父音符范围调用getTags）函数


在第二个音符指令

5. 链接功能
   （添加到getTags范围内）
   （调用getNote父音符范围）

这是行不通的，因为在＃2的第一个音符的范围还没有一个getTags功能。

一个简单的例子可以在 Plunker 被发现。

因此​​，我的问题归结为：什么决定了链接功能被称为嵌套指令的顺序

（我在恶搞指令使用上getTags $腕表解决的问题......）

关于

解决方案

报价约什 - 米勒D.谁曾亲切地回答了类似的问题，我有：

只是一对夫妇的技术说明，假设你有这样的标记：

 ＆LT; D​​IV＆指令1 GT;
  ＆LT; D​​IV指令2＆GT;
    ＆LT;！ -  ...  - ＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

现在AngularJS将按照一定的顺序运行指令功能创建指令：

  

指令1：编译

  
  

    

      

指令2：编译

    
  
  
  

指令1：控制器

  
  

指令1：pre-链接

  
  

    

      

指令2：控制器

      
      

指令2：pre-链接

      
      

指令2：后链接

    
  
  
  

指令1：后链接

在默认情况下的直线链接功能是一个后链接，让你的外指令1的链接功能将直到内部指令2的链接功能追着跑。这就是为什么我们说，这是唯一安全的做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屋！