时间戳

首页 > 解决方案 > Angularjs ui-route 正确实现多个视图

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

问题描述

我想实现这样的页面 在此处输入图像描述

我有以下文件夹结构：

-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}'，我不能在查询字符串上添加一些其他值。如何管理内部变量和方法？

多谢

标签： angularjsangular-ui-routermultiple-viewsnested-views

解决方案

据我了解，最好参加活动$emit，$broadcast并on实现相同的目标。

正如我所看到的，您拥有独立的控制器，与大多数其他控制器没有关系。

实施它的一些建议：

  1. 使用$rootScope.$emit和$rootScope.on如果他们的控制器没有关系。确保您手动删除它（如果应用程序不太重，可以忽略，但应牢记）。这个链接肯定会有所帮助。例如：

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

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

推荐阅读