javascript - 指令之间的交互

Question

我有 2 个指令，一个显示对象列表，另一个将对象添加到该列表。我遇到的问题是该列表以这种方式与另一个元素列表绑定(bind):

主要代码:

<!--main code -->
<div>
    <ul>
        <li>
            <element-a></element-a>
        </li>
        <li>
            <element-a></element-a>
        </li>
        <li>
            <element-a></element-a>
        </li>
        <li>
            <element-a></element-a>
        </li>
    </ul>
</div>

元素A模板

<!-- element-a template -->
<ul>
    <li> 
        <my-element-list></my-element-list>
    </li>
    <li>
        <my-element-list></my-element-list>
    </li>
    <li>
        <my-element-list></my-element-list>
    </li>
    <li>
        <my-element-list></my-element-list>
    </li>
</ul>

我的列表模板:

<!-- my-element-list template -->
<button type="button" data-ng-click="addElement()">Add</button>
<ul>
    <li>
        my element data
    </li>
    <li>
        my element data
    </li>
    <li>
        my element data
    </li>
</ul>

我是 Angular 新手，但我不想在每个列表上都添加 add 指令，因为那样会在 html 中添加很多不需要的代码。此外，add 是一个具有模板等的指令，应该显示一个请求元素数据的模式对话框。

这是执行此操作的正确方法吗？单击添加按钮时如何显示添加模式对话框？我尝试使用 $broadcast 和 $emit，但 add 指令不是元素列表的父/子元素。

Answer 1

基本上有两种可能性:

• 创建通信服务
• 使用$rootScope和事件

另外:

• Directive-to-directive communication in AngularJS?
• What's the correct way to communicate between controllers in AngularJS?
• AngularJS: Communication between directives

还有:

• http://www.thinkster.io/pick/sMgLuIxf02/angularjs-directive-to-directive-communication
• http://thesmithfam.org/blog/2012/12/17/communicating-between-directives-in-angularjs/