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中的多层指令之间的通信

回答

相关问题