Angular中的多層指令之間的通信

我正在創建一些指令，這些指令將組成我應用程序中的一個「屏幕」。爲了創建這個新的屏幕，你會寫這樣的：Angular中的多層指令之間的通信

<screen title="Test Title"> 
    <side-menu align="left"> 
     <menu-item>Test One</menu-item> 
     <menu-item selected="true">Test Two</menu-item> 
     <menu-item disabled="true">Test Three</menu-item> 
    </side-menu> 

    <content animation="fade"> 
     <view>Content for menu option 1</view> 
     <view>Content for menu option 2</view> 
     <view>Content for menu option 3</view>   
    </content> 
</screen>

每個<menu-item>將顯示的<content>標籤內的「意見」之一。它像標籤一樣工作。我已經通過在鏈接中跟蹤<content>指令中每個<view>指令的數組來設置它們。相同的<menu-item>。

我的問題是，現在我已經設置好了，<side-menu>指令和<content>指令之間進行通信的最佳方式是什麼，以便在單擊時隱藏並顯示正確的視圖？我應該使用事件，通用服務來保持狀態，還是有辦法從<view>和<menu-item>指令中訪問<screen>指令中的控制器，並在那裏保存數據/狀態？根據我的理解，我只能從子指令訪問父控制器，但如果您願意的話，則不能訪問「父母」控制器，除非我使用某種傳遞。

我打算在這個「屏幕」上還有一些需要溝通的組件，所以我希望在繼續之前確定「正確」的方式來做到這一點，或者至少得到一些反饋，其他想法。

如果有任何疑惑，我很樂意提供更多信息。

來源

2014-04-04 DRiFTy

所以經過一番挖掘，我發現你可以將一個數組傳遞給指令的require屬性。

您可以用它來找到父控制器和祖父母控制器...等各以前我的指令將有一個require值，如：require: '^sideMenu'爲menuItem指令。

現在我可以通過傳遞一個數組需要sideMenu和screen控制器到menuItem指令：

require: ['^screen', '^sideMenu']

現在在我的menuItem指令的鏈接功能，我可以訪問這些控制器是這樣的：

link: function(scope, element, attrs, controllers) { 
    var screenCtrl = controllers[0]; 
    var sideMenuCtrl = controllers[1]; 
}

注意controllers屬性現在是我需要的控制器的數組，並通過索引訪問。雖然我覺得我的指令現在更緊密地耦合在一起，但我確實喜歡它比使用事件/服務更好。

我解釋了所有這些，因爲在Angular文檔中沒有提到這一點。

來源

2014-04-05 02:59:26 DRiFTy

Angular中的多層指令之間的通信

回答

相關問題