Javascript 指令之间的相互作用

我有两个指令，一个显示对象列表，另一个向该列表添加对象。 我遇到的问题是，列表以这种方式绑定到另一个元素列表：

主要代码：

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

元素模板

<!-- 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指令不是元素列表的父/子项。

您可能希望尝试以不同的方式执行此操作。您的列表应该从控制器中的项目数组生成，然后使用内置的角度指令

ng repeat

呈现到模板中。然后，向列表中添加新项应该非常简单，只要确保控制器中的

addElement（）

函数正在向数组中添加项即可。如果列表中的每个元素也需要自己的模板，请在

ng repeat

循环中使用

ng include

指令

---

基本上有两种可能性：

• 为通信创建一个服务
• 使用

  $rootScope

  和事件

此外：

以及：

---

这不是问题所在。项目以这种方式呈现。仅显示数据结构以说明$emit和$broadcast不起作用的原因。