Angularjs <div ng-controller覆盖第二个ng-controller

Question

我在图表中使用了AngularJS。

我必须创建两个图表，它们都使用相同的导航栏。

但是，我可以在屏幕上同时显示两个图表；只有<div ng-controller="first ">可以使用导航栏。我的第二个<div ng-controller="second">被覆盖了。

<div ng-controller="first">
    <div ng-controller="second ">

这就是我如何在我的HTML上使用它，

如果我用<div ng-controller="first">替换控制器，ng- <div ng-controller="second "> =“second”将在dropdownm中工作得很好，但"first“将被覆盖

这是我的JSBIN

我也试过这个answer on SO，要么它对我不起作用，要么我不能让它起作用。

我的目标是在从下拉菜单中进行选择后更新这两个图表。对，由于<div>问题，只有一个可以正常工作

Answer 1

因此，您希望对两个图表使用相同的过滤器，这两个图表是根据两个不同控制器中的可用数据创建的。

您当前的方法将只更新附加了ng-model的第二个控制器的值。相反，请尝试使用服务。让我们称其为chart.service

现在这个服务可以有像date，month，year等过滤器的值。让两个控制器都使用这个服务，当从UI更新时，使用你的控制器更新服务中的值。由于服务将具有单个实例，因此两个控制器现在将具有相同的筛选器值，并且两个图表将正确显示。