指令之間的相互作用

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> 

我是新來角，但我不想有添加目錄在每個列表上都有效，因爲那樣會有很多不需要的代碼添加到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/

Answer 2

你可能想試試這個方法。您的列表應該從控制器中的一系列項目生成，然後使用內置的Angular指令ng-repeat將其呈現到模板中。然後，將新項目添加到列表中應該如同確保控制器中的addElement()函數將項目添加到陣列一樣簡單。如果列表中的每個元素還需要它自己的模板，請在ng-repeat循環內使用ng-include指令進行研究。

ng-repeat docs

ng-include docs