我正在创建一些指令,这些指令将构成我应用中的单个“屏幕”。要创建这个新屏幕,您可以这样写:
<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>
标记内显示其中一个“观看次数”。它像标签一样工作。我通过在链接时跟踪数组中<view>
指令内的每个<content>
来设置此设置。与<menu-item>
相同。
我的问题是,现在我已经设置了这个,<side-menu>
指令和<content>
指令之间进行通信的最佳方式是隐藏并在点击时显示正确的视图?我应该使用事件,保持状态的公共服务,还是有办法从<screen>
和<view>
指令访问<menu-item>
指令内的控制器,并保持数据/状态在那里?根据我的理解,我只能从子指令访问父控制器,但如果你愿意的话,不能访问“祖父”控制器,除非我使用某种传递方式。
我计划在这个“屏幕”上还有一些组件需要进行通信,所以我希望在继续之前确定“正确”的方法,或至少得到一些反馈和其他想法。
如果其中任何一个令人困惑,我很乐意提供更多信息。
答案 0 :(得分:4)
因此,经过一番挖掘,我了解到您可以将数组传递给指令的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文档中没有提到这一点。