Question

所以这是我的问题：

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

当用户点击指令＃1中图表中的一个栏时，我需要更改指令＃2中的图表。

目前，两个图表指令都是从本页的控制器中提供各自的数据集。

现在从我所看到的，我真的有三个选择：

将回调函数传递给指令＃1，该指令在选择图表时调用。该回调函数将存在于页面的控制器上，然后可以更改必要的数据，以便通过数据绑定更新指令＃2。
事件。选择图表时，在指令＃1内的$ rootScope上触发事件。然后，我可以在Controller上收听此事件，并更改指令＃2中的数据，以通过数据绑定对其进行更新。
使用像Rx.JS这样的库，以便在指令＃1中进行观察。我没有和Angular一起使用Rx.JS那么说实话我不知道这是否会起作用或者看起来会是什么样子。但是，如果我可以从指令＃1中将此Observable暴露给页面控制器，那么我应该能够订阅它并在必要时更新指令＃2。

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

这很快就会变成“回调地狱”，似乎不是一个非常“角度”的解决方案。这也会在页面的Controller和这个非常通用的Chart指令之间产生一些紧密的依赖关系。出于我的选择，我认为这是最好的解决方案，但我会喜欢更好的解决方案。
我必须构建一种在事件名称上指定id的方法，这些事件名称对于该指令的显式实例化是唯一的，因为从理论上讲，页面上可能存在多个这些Chart指令。

我很想知道是否有人有任何我没有想过的其他想法或更好的方法？也许甚至是我不知道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。

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

1 个答案: