Angular中多层指令之间的通信

时间:2014-04-04 12:42:07

标签: javascript angularjs angularjs-directive

我正在创建一些指令,这些指令将构成我应用中的单个“屏幕”。要创建这个新屏幕,您可以这样写:

<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>指令内的控制器,并保持数据/状态在那里?根据我的理解,我只能从子指令访问父控制器,但如果你愿意的话,不能访问“祖父”控制器,除非我使用某种传递方式。

我计划在这个“屏幕”上还有一些组件需要进行通信,所以我希望在继续之前确定“正确”的方法,或至少得到一些反馈和其他想法。

如果其中任何一个令人困惑,我很乐意提供更多信息。

1 个答案:

答案 0 :(得分:4)

因此,经过一番挖掘,我了解到您可以将数组传递给指令的require属性。

您可以使用它来查找父控制器和祖父级控制器......等。以前我的每个指令都有一个require值,例如require: '^sideMenu'指令的menuItem

现在我可以通过传递一个数组来要求sideMenuscreen控制器进入menuItem指令:

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

现在在我的menuItem指令的链接功能中,我可以这样访问这些控制器:

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

注意controllers属性现在是我需要的控制器数组,并且可以通过索引访问。虽然我觉得我的指令现在更加紧密耦合,但我确实比使用事件/服务更喜欢它。

我正在解释所有这些,因为在Angular文档中没有提到这一点。