当我点击另一个指令时如何更改一个指令？

Question

这是我的问题：

我有一个显示两个不同图表的页面。这些图表中的每一个都有自己的指令，它们有自己的隔离范围。

当用户点击指令#1 图表中的一个条形时，我需要指令#2 中的图表进行更改。

目前，这两个图表指令都从该页面的控制器获取各自的数据集。

现在从我所看到的情况来看，我确实有大约三个选择：

1. 将回调函数传递给指令#1，当图表被选中时调用。该回调函数将存在于页面的Controller中，然后可以更改必要的数据，以便通过数据绑定获取指令#2进行更新。

2. 事件。选择图表时，在指令 #1 内的 $rootScope 上触发事件。然后我可以在 Controller 上监听此事件并更改指令 #2 中的数据以通过数据绑定对其进行更新。

3. 使用 Rx.JS 之类的库来在指令 #1 中创建可观察对象。我没有在 Angular 中使用过 Rx.JS，所以说实话，我不知道这是否可行，也不知道它会是什么样子。但是，如果我可以在指令 #1 中将此 Observable 公开给页面的控制器，那么我应该能够订阅它并在必要时更新指令 #2。

现在我对解决方案 #1 和 #2 有了很好的理解，但它们有自己的问题：

1. 这很快就会变成“回调地狱”，而且似乎不是一个非常“Angular”的解决方案。这也在页面的控制器和这个非常通用的图表指令之间产生了一点紧密的依赖关系。在我的选择中，我认为这是最好的解决方案，但我想要一个更好的解决方案。

2. 我必须构建一种方法来在事件名称上指定 ID，该 ID 对指令的显式实例化是唯一的，因为理论上页面上可能有多个图表指令。

我很想知道是否有人有我没有想到的其他想法或更好的方法？甚至可能是我不知道 Rx.JS 为 Observable 提供的东西？

TLDR：我需要点击指令 #1 并让它影响指令 #2 中当前显示的内容。

Answer 1

我认为这可以通过在指令中使用两个绑定范围来完成，例如，

.directive('graphOne', function () {
   return {
       template: blah/blah.html,
       scope: {
         scopeToPass: '='
       }
   }
})

and 

.directive('graphTwo', function () {
   return {
       template: blah1/blah1.html,
       scope: {
         scopeToGet: '='
       }
   }
})

在html中

<graph-one scope-to-pass="uniqueScope"></graph-one>
<graph-two scope-to-get="uniqueScope"></graph-two>

由于我们将 $scope.uniqueScope 分配给两个指令，并且 scopeToPass 是双向绑定，当 scopeToPass 的值发生变化时，它将被传递给 uniqueScope，而从 uniqueScope 它将被传递给 scopeToGet。