在角度多层次的指令之间的通信 [英] Communication between multi-layered directives in Angular

问题描述

我创建了几个指令，将组成一个屏幕，在我的应用程序。为了创建这个新的屏幕，你会写这样的：

I'm creating a few directives that will make up a single "screen" in my app. To create this new screen you would write it like this:

<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>

每个＆LT;菜单项＆GT; 将显示里面的意见之一＆lt;内容＆GT; 标记。它的工作原理就像标签。我有这个成立了由跟踪每个＆LT;查看＆gt;内容＆GT; 指令的＆LT内在一个阵列时它们被链接。同为＆LT;菜单项方式＆gt;

Each <menu-item> will display one of the "views" inside of the <content> tag. It works like tabs. I've got this set up by keeping track of each <view> inside of the <content> directive in an array when they are linked. Same for <menu-item>.

我的问题是，现在我已经得到了这个设置，什么是℃之间沟通的最佳途径;侧面菜单＆gt; 指令和＆lt;内容＆GT; 指令隐藏和点击时显示正确的看法？我应该使用的事件，一个共同的服务来保持状态，还是有办法，我也许可以访问内部的＆LT控制器，屏幕＆GT; 从指令中的＆LT;视图＆gt; 和＆LT;菜单项＆GT; 指令，并保持数据/状态呢？从我的理解，我只能从孩子的指令访问父控制器，而不是大母控制器，如果你愿意，除非我使用某种直通的。

My question is, now that I've got this set up, what is the best way to communicate between the <side-menu> directive and the <content> directive to hide and show the correct view when clicked? Should I use events, a common service to hold state, or is there a way I can maybe access the controller inside of the <screen> directive from the <view> and <menu-item> directives, and hold the data/state there? From my understanding I can only access the parent controller from a child directive, but not the "grand parent" controller if you will, unless I use some sort of pass-through.

我打算有这样的画面，将需要以及沟通，所以我希望确定正确的方式做到这一点之前，我继续多了一些部件，或者至少得到一些反馈等想法。

I plan to have a few more components on this "screen" that will need to communicate as well so I'm hoping to determine the "correct" way to do this before I continue, or at least get some feedback and other ideas.

如果任何这是混乱的，我很乐意提供更多的信息。

If any of that is confusing, I'd be happy to provide more information.

推荐答案

所以有点挖，我了解到，你可以传递一个数组后，要求指令的财产。

So after a bit of digging, I've learned that you can pass an array to the require property of a directive.

您可以使用它来找到父控制器和祖父母控制器...等previously我的每一个指令，将有一个要求值，如：要求：^ sideMenu为菜单项指令。

You can use this to find parent controllers, and grandparent controllers... etc. Previously each of my directives would have one require value such as: require: '^sideMenu' for the menuItem directive.

现在我可以要求 sideMenu 和屏幕控制器到菜单项通过传递一个数组指令：

Now I can require the sideMenu and screen controllers into the menuItem directive by passing an array:

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

现在在我的菜单项指令的链接功能，我可以访问这些控制器是这样的：

Now in the link function of my menuItem directive, I can access these controllers this way:

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

注意控制器现在属性是我所需要的控制器的阵列，并且通过索引进行访问。虽然我觉得好像我的指令是现在稍微紧耦合的，我不喜欢它比使用事件/服务更好。

Notice the controllers property is now an array of the controllers that I required, and are accessed by index. Although I feel as though my directives are little more tightly coupled now, I do like it better than using events/services.

我解释这一切，因为在角文档任何地方没有提到这一点。

I'm explaining all of this, because no where in the Angular docs does it mention this.

这篇关于在角度多层次的指令之间的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！