2015-01-07 42 views
0

我一直在堅持構建一個大型的AngularJS應用程序內部組件,我一直在維護,我真的很喜歡一些指導,因爲我在我的智慧結束。請多多包涵!是否有可能檢索在另一個指令內編譯的指令的控制器?

語境:

我有一些指示,我想有相互通信。因此,我認爲在每個指令中定義一個控制器以暴露API以供其他指令使用是適當的。現在,我非常瞭解指令中的require屬性,以及如何使用父指令的控制器。不幸的是,在我目前的情況下,我的指令並不適合使用需要控制器。

而不是使用require,我所面對的代碼基本上大多選擇將指令直接添加到DOM,然後再編譯它們。我想這是爲了靈活定製指令如何相互依賴。

我已經在示範Plunker的下面添加了link函數的一個片段,該示例在我創建的示例Plunker的幫助下可視化我正面臨的問題。請注意指令如何被附加到DOM然後被編譯。我儘可能地嘗試創建我實際上正在處理的代碼的簡化版本,因爲我無法發佈它。

link: function(scope, elem) { 
    scope.data = '...'; 
    var d2Elem = elem.find('li').eq(0); 
    d2Elem.attr('d2', ''); 
    var input = angular.element('<input type="text" ng-model="data">'); 
    elem.find('li').eq(-1).append(input); 
    $compile(d2Elem)(scope); 
    $compile(input)(scope); 
    // Able to get d1 directive controller 
    console.log(elem.controller('d1')); 
    // Not able to get compiled d2 directive controller 
    console.log(d2Elem.controller('d2')); 
    // Able to get compiled ng-model directive controller 
    console.log(input.controller('ngModel')); 
} 

問:

可能有人請解釋爲什麼我看到我在我的Plunker評論的行爲?爲什麼當我編譯一個我定義的指令(即d2)時,即使它存在於指令定義中,我也無法訪問它的相應控制器?

巧合的是,我發現在編譯內置的ng-model指令後,我實際上可以得到它的控制器。

我在思考一個額外的觀點:我描述的過程中,最簡單的方法是管理相互通信的指令嗎?注意到這些指示不必有嚴格的親子關係。

PLUNKER

非常感激的一些想法!

回答

0

需要時間,直到d2.html被Ajax異步加載,直到它完全加載,你不能訪問它的控制器,看到附加的截圖後,ajax稱它能夠訪問d2的控制器。

enter image description here

我試圖用

setTimeout(function(){console.log(d2Elem.controller('d2'))},1000); 

更換

console.log(d2Elem.controller('d2'))} 

和它的工作對我來說,可能是這會給你一些提示,也可以將延遲將解決您的問題,我知道這不是很好的做法!

+0

這是一個不錯的拍攝 – elaijuh

+0

好的觀察,謝謝。雖然我想知道爲什麼在控制器可用之前有一段延遲。也許這跟'$ compile'調用有關,它不會在完成後立即執行'$ digest'。 – miqid

相關問題