8

我對JavaScript編程還很陌生,我只涉及AngularJS。爲了評估它,我決定寫一個簡單的筆記應用程序。該模型非常簡單,每個音符都有一個標籤,一個文本和一個標籤列表。然而,我遇到了嵌套指令的隔離範圍之間傳遞數據的問題。在嵌套和重複的angularjs指令中調用鏈接函數的順序

我有三個指令,註釋,說明和標註器(定義具有相同名稱的新元素)。他們每個人都使用一個孤立的範圍。

該票據指令使用NG-重複到「渲染」附註與note元素中的每一個。

note指令使用標記元素「呈現」標記列表。

note指令定義範圍:{getNote:「&」,...}以便將音符實例從音符列表傳遞到音符控制器/指令。 getNote(index)函數在note指令的鏈接函數中被調用。這工作正常!

tagger指令定義範圍:{getTags:「&」,...},以便將給定筆記的標記列表傳遞給標記控制器/指令。 getTags函數在tagger指令的鏈接函數中調用。這不行!

據我瞭解,問題是,指令的鏈接函數調用中不一致的順序。調試應用程序顯示的鏈接功能被稱爲按以下順序:在筆記

  1. 鏈路功能指令 (添加getNote函數來註釋範圍)

  2. 鏈路功能在標記器指令第一個音符 的第一個音符指令 (添加getTags的範圍) (調用getNote(調用父音符範圍getTags)功能

  3. 鏈接功能父音符範圍)

  4. 鏈接功能在第二個音符的惡搞指令 (調用父音符範圍getTags)函數在第二個音符指令 (添加getTags到

  5. 鏈接功能範圍) (調用getNote父指出範圍)

這是行不通的,因爲在#2的第一個音符的範圍還沒有一個getTags功能。

甲簡單的例子可以在Plunker找到。

因此,我的問題歸結爲:什麼決定了鏈接功能被稱爲嵌套指令的順序。

(我解決問題的辦法使用上的惡搞指令getTags $表...)

問候

+0

[角度指令的預鏈接,後鏈接和控制器方法實用指南](http://www.undefinednull.com/2014/07/07/practical-guide-to-prelink-postlink-and-controller-methods -of-angular-directives /)是非常全面的文章,如何在嵌套的指令中使用pre-link/post-link。 –

回答

17

報價約什 - 米勒D.誰曾親切地回答了類似的問題,我有:

「只是一對夫婦的技術說明假設你有這樣的標記:

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

現在AngularJS將創建通過以特定的順序運行指令函數的指令:

指令1:編譯

指令2:編譯

指令1:控制器

指令1:預鏈接

指令2:控制器

指令2:預鏈接

指令2:後期製作環節

指令1:交聯

默認直「鏈接」功能是一個後鏈接,讓你的外指令1的鏈接功能將不運行直到內部指令2的鏈接函數已經運行。這就是爲什麼我們說在後鏈接中進行DOM操作是安全的。 「

+3

嗨@Tahir謝謝你的回答。也許是我傻,但正如我plunker看到的,我有: 但鏈接功能調用順序是 ... 而將預期根據你的回答... 對不起,如果我是愚蠢的:-) – positively4th

+0

我會傾向於認爲這是一個混合的東西,因爲不僅ng-repeat執行與優先級= 1000(你有嵌套的ng-重複陳述)。但是你似乎沒有使用transclude選項,所以我不太確定你的嵌入式指令的編譯順序。 – Taye

0

在單個元件的連接功能的順序是由後者又根據該指令定義對象的屬性priority下令編譯函數的順序來確定。

來源:http://docs.angularjs.org/guide/directive

上的多個元素與transclusion:內僞指令外的指令之前進行評價。原因:包容的性質。

關於具有兄弟姐妹的多個元素:從頂部到底部執行。原因:解析$ compile的邏輯。

+0

Hi @ basarat,感謝您花費一些時間回答!但是我沒有把你的答案應用於我的問題。我沒有多個指令在同一個元素上,我沒有使用transclusion,我的note元素當然是兄弟姐妹,但我不確定明白你的意思,也許這很明顯,但我仍然不明白鏈接的調用順序函數在我的Plunker例子中。Reagrds – positively4th