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

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：​​