Взаимодействие между директивами

Question

У меня есть две директивы, одна из которых отображает список объектов и другую, которая добавляет объекты в этот список. Проблема, что у меня есть, что список привязаны к списку еще элементы таким образом:

Главная код:

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

Я новичок в угловом, но я не хочу, чтобы добавить каталог ective в каждом списке, так как у него будет много ненужного кода, добавленного в html. Также добавление - это директива с шаблоном и т. Д., Которая, как предполагается, показывает модальное диалоговое окно, которое запрашивает данные элемента.

Правильно ли это подходит для этого? Как я могу получить диалоговое окно добавления модальности, отображаемое при нажатии кнопки добавления? Я пробовал с $broadcast и $emit, но директива add не является родительским/дочерним элементом списка элементов.

Answer 1

Есть два основных варианта:

• Создать услугу для связи
• Используйте $rootScope и события

Als О:

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

Answer 2

Возможно, вы захотите попробовать и пойти об этом по-другому. Ваш список должен быть сгенерирован из массива элементов вашего контроллера, а затем отображен в шаблон с помощью встроенной директивы Angular ng-repeat. Затем добавление новых элементов в список должно быть таким же простым, как убедиться, что функция addElement() в вашем контроллере добавляет элементы в массив. Если каждому элементу в вашем списке также нужен собственный шаблон, посмотрите на использование директивы ng-include в цикле ng-repeat.

ng-repeat docs

ng-include docs