Question

我正在开发一个应用程序来显示一些图表和一些控件来过滤所显示的数据。 HTML页面的结构是相同的，所以我虽然可以创建一个HTML模板并将其与不同的控制器一起使用，每个图表类型一个，每组控件一个，以过滤特定的图表数据。我的想法是有一个默认的HTML，我根据所请求的类型填充图表控制器和过滤器控制器。

为了实现这个想法，我目前正在使用和滥用原型继承。我有一个ChartController，它定义了两个范围模型，用于保存图表和过滤器控件配置。然后我有两个子控制器，例如LineChartController和LineChartFiltersController，它们使用特定于图表类型的配置填充这两个变量。

一切正常，但我不喜欢这种方法，因为我的孩子控制器仍然非常依赖父母，并且很难测试甚至理解$ scope模型来自哪里的人不知道如何控制器设计。

根据要求，这里有一些片段：

app.controller('ChartController', ['$scope', function($scope) {
  $scope.chart = {};
  $scope.filters = {};
}]);
app.controller('LineChartController', ['$scope', function($scope) {
  $scope.chart.tooltip = {...};
  $scope.chart.commonSeriesSettings = {...};
}]);
app.controller('LineChartFiltersController', ['$scope', function($scope) {
  $scope.filters.beginDate = ...;
  $scope.filters.endDate = ...;
  $scope.filters.granularity = ...;
}]);

然后我有一个路由重定向到所有图表共有的HTML模板并使用ChartController。在其中我包含LineChartController和LineChartFiltersController创建关系父/子：

<!-- main template -->
<div ng-include="/partials/line_chart.html"></div>
...
<div ng-include="/partials/line_chart_filters.html"></div>

line_chart.html

<div ng-controller="LineChartController">
  <div chart="widget"></div>
</div>

line_chart_filters.html

<div ng-controller="LineChartFiltersController">
  <!-- date pickets, sliders, etc. that use $scope.filter -->
</div>

我知道（也许）在控制器之间共享数据的最佳方法是注入服务。但我想分享模型数据，图表配置和过滤器控件，而不是从服务器获取的某些商业模型。在这种情况下，我很难看到服务的优势，因为通过服务，我得到了一个单例对象。来自典型的OOP编程，我期望获得一个特定于实例化控制器的实例。据我所知，单身人士服务在不同的控制器中是相同的。出于这个原因，我使用了范围继承。

是否有其他方法可以实现我的目标？或者注入服务会更合适吗？

Answer 1

我已经看到过类似的三种不同方式。我不遵循你的用例，所以我不确定哪种方法可以很适合你。

以下是我所知道的完成类似事情的三种方式。

使用Custom Directive获取信息并以相同方式显示。如果页面之间的列表不同，这可能没有意义。
创建一个Service，其中包含需要跨控制器使用的信息的逻辑和状态。如果重要的因素是信息的逻辑和状态并且显示可能不同，则这很有效。
使用观察者在控制器之间传递信息。我发现这是一个令人沮丧的路线，因为它是很难来测试。当偶数经常发生并且需要触发多个动作时它确实有效，但我不推荐这条路线。

使用您的问题发布一些代码可能有所帮助。谢谢。

控制器之间的AngularJS共享模型

1 个答案: