如何使指令彼此通信，但也可重用

Question

我正在構建一個簡單的功能，可以讓用戶添加到表中。填寫表格並單擊提交將用戶添加到表格中。

有三個視圖，每個視圖都有一個指令。的意見是：

1）的面板（包裝紙，其控制哪個視圖來呈現）2）所有已經分離範圍表單視圖（面板主體）3）表視圖（板主體） 。 我想使這些指令可重複使用的（因此，分離範圍）

是這樣的：

<main-user-directive> 
<user-table ng-show = "viewMode === 'table'"></user-table> 
<add-user-form ng-show = "viewMode === 'addForm'"></add-user-form> 
</main-user-directive> 

現在，如果你嘗試添加用戶，但沒有完成取消過程，<add-user-form>需要<main-user-directive>的控制器訪問$scope.cancelForm功能（其基本上將$scope.viewMode表格'addForm'更改爲'table'）。

我不知道這使得我的指令非常可重用。 所以我的問題是：我應該需要父指令的控制器還是使用類似服務的東西來控制要呈現的視圖？或者是其他東西？

Answer 1

你可以使用隔離範圍 「&」

<main-user-directive> 
<user-table ng-show="viewMode === 'table'"></user-table> 
<add-user-form ng-show="viewMode === 'addForm'" on-cancel="cancelForm()"></add-user-form> 
</main-user-directive> 

在你的指令

scope: { 
    onCancel: '&' 
}, 
template: "<button ng-click='onCancel()'>Cancel</button>" 

看看這個簡短的視頻：https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

Plunkr：​​