Question

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

主要代码：

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

我是角色的新手，但我不想在每个列表上都有add指令，因为这会将很多不需要的代码添加到html中。 add也是一个带有模板等的指令，它被假定为显示一个模态对话框，它将请求元素数据。

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

Answer 1

您可能想尝试以不同的方式进行此操作。您的列表应该从控制器中的一系列项目生成，然后使用内置的Angular指令ng-repeat呈现到模板中。然后，将新项添加到列表应该就像确保控制器中的addElement()函数将项添加到数组一样简单。如果列表中的每个元素都需要它自己的模板，请在ng-include循环中使用ng-repeat指令。

ng-repeat docs

ng-include docs

Answer 2

基本上有两种可能性：

为通讯创建服务
使用$rootScope和事件

此外：

和

指令之间的相互作用

2 个答案: