AngularJS：從控制器調用指令功能以正確的方式

Question

我有兩種方案：

1. 在控制器中定義的函數被從一個指令（see plunk）調用。

該指令包含'&'範圍限制，用於將控制器和指令功能相關聯。如果你點擊文本，元素點擊事件在指令中被觸發，並且調用控制器函數。 $ scope。$ apply（）用於通知AngularJS點擊事件並在屏幕上刷新var的值。

1. 指令中定義的函數由控制器調用（see plunk）。

該指令沒有任何範圍限制，這意味着控制器中的$scope和指令中的scope是共享的。我在可以從控制器調用的指令中定義func1()（嘗試單擊文本），但是由於控制器需要知道函數的名稱，因此它似乎具有侵入性。

有沒有一種方法來定義func1()，使得函數名稱在指令div中聲明，類似於情況1？

Answer 1

這兩個選項都是可能的，取決於您構建組件的方式。

選項1 - 控制器應該註冊偵聽器/回調並設置指令的屬性（當使用隔離範圍 - 我推薦）。控制器不應調用指令函數，而應改變已在指令上綁定的屬性。該指令如果設置正確應該看這個屬性並相應地更新。

指令不應該知道他們的控制器是誰在我看來，它促進了解耦代碼。相反，控制器應該設置指令可以在適當的時候調用的回調函數（即讓控制器知道點擊，選擇，刪除，刷卡等等）

選項2 - 可以接受當您構建提供結構和行爲邏輯但未定義實際單個組件UI（不包括可能的骨架UI）的Web組件時。例如一個list指令。單個列表可能沒有在指令中定義，而是針對每個上下文或使用「插入」，給我們一個更模塊化和可重用的組件。它確實要求我們瞭解一些關於指令的事情。它還要求我們修改攔截功能，以在轉移內容上使用指令作用域，而不是原始控制器作用域。舉個例子，你可以簽出一個列表組件作爲例子。

http://github.com/Spidy88/ng-web-components

文本從這個html page片段。 sf-list指令是一個隔離的範圍指令，用於定義列表行爲。不過，我們仍然可以通過修改後的包含式來定義每個單獨的列表項的外觀。它依靠我們呼叫selectItem雖然爲了觸發列表上的選擇行爲。

<sf-list items="ctrl.emails" listener="ctrl.adapter"> 
    <div class="list-item email" ng-click="selectItem(item)" ng-repeat="item in items track by item.id"> 
     <div class="from">{{ item.from }}:</div> 
     <div class="subject">{{ item.subject }}</div> 
    </div> 
</sf-list>