Angularjs ui-route 正确实现多个视图

Question

我想实现这样的页面

我有以下文件夹结构：

-root/
--root.controller.js
--root.module.js
--root.routes.js
--root.html
--filters/
----filters.controller.js
----filters.module.js
----filters.routes.js
----filters.html
--tableData/
----tableData.controller.js
----tableData.module.js
----tableData.routes.js
----tableData.html
--graph/
----graph.controller.js
----graph.module.js
----graph.routes.js
----graph.html

我想知道以最佳方式管理来自每个控制器的呼叫的最佳方法。 我的意思是，从过滤器中，我可以更改下拉列表中的选择或更新其他字段值，然后我会更新 tabledata 上的数据。如果我更改 tabledata 上的选择，我会更新图表。 根 url 是'/root/{itemId}'，我不能在查询字符串上添加一些其他值。 如何管理内部变量和方法？

非常感谢

Answer 1

据我了解，最好参加 $emit 、 $broadcast 和 on 的活动来达到同样的效果。

如我所见，您拥有独立的控制器，与大多数其他控制器没有任何关系。

实现它的一些建议：

1. 如果它们的控制器没有关系，请使用$rootScope.$emit 和$rootScope.on。确保您手动删除它（如果应用程序不太重，可以忽略但应牢记）。 This link will be surely helpful 。 例如：

如果过滤器更改，将触发事件filter-changed。 graph.controller 和 table.controller 将被通知并相应地呈现 UI。

1. 创建一个messaging 服务，控制器将从该服务订阅和取消订阅events。这将控制events 的数量。您将了解应用程序中实际创建了多少事件。