Angular：如何拆分（划分）控制器的脚本？ [复制]答案

【问题标题】：Angular: How to split (divide) controller's script? [duplicate]Angular：如何拆分（划分）控制器的脚本？ [复制]
【发布时间】：2015-08-24 06:21:23
【问题描述】：

我最近刚刚使用 Angular 构建了一个基于 Web 的应用程序。我真的很喜欢角度处理模型-视图-控制器的方式，所以我构建了我的控制器来处理按钮单击事件、日期选择器更改事件等，同时业务逻辑由模型控制。问题是：我放入视图中的按钮或控件越多，我的控制器脚本就越大。

例如：如果我有 2 个按钮，我的控制器将如下所示：

$scope.onBtn1Clicked = function(){}
$scope.onBtn2Clicked = function(){}

那么，如果我还有 10 个按钮呢？ 10 更多功能 ? 我很清楚 Angular 的指令，但如果我只使用一次，我不想编写指令。所以我认为最好将我的控制器拆分/划分为几个“子控制器”文件并将它们加入我的“主控制器”中。

可以吗？或者有人有其他解决方案吗？谢谢

PS：我知道How to create separate AngularJS controller files?。但这是不同的：我已经将我的控制器分成了几个文件，所以我的应用程序中的一个页面有一个控制器。我遇到的问题是那些控制器变得如此庞大且无法维护

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

这取决于：

如果函数控制某些元素的行为，它应该在directive内
如果函数包含一些独立的逻辑，它应该在service（或工厂或提供者）内
如果函数包含业务逻辑，它应该controller

另外：如果某些逻辑可以分离，则需要将其放入子controller（指令或服务）

【讨论】：

我猜你是说我应该写指令。假设我有一个包含一些面板/部分的页面，每个都有自己的指令。那么，如果这些指令变得如此之大怎么办。我应该将它们再次拆分为许多较小的指令吗？我只想知道处理我遇到的这个大项目问题的最佳 Angular 实践是什么
也感谢您提供上面有关服务的文章链接。伟大而清晰的教程！
@denny yap 你理解正确，你应该使用指令并将它们拆分然后需要它
好吧..那我需要写很多指令和控制器，所以我想我的问题已经在这里回答了stackoverflow.com/questions/20087627/…谢谢！

【解决方案2】：

是的，当然，您可以嵌套控制器

控制器

myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);

和标记

<body ng-app="app">
  <div ng-controller="MainController">
    <p>Good {{timeOfDay}}, {{name}}!</p>

    <div ng-controller="ChildController">
      <p>Good {{timeOfDay}}, {{name}}!</p>

      <div ng-controller="GrandChildController">
        <p>Good {{timeOfDay}}, {{name}}!</p>

      </div>
    </div>
  </div>
</body>

Plunker demo
Explanation

【讨论】：

您的演示不起作用，它只是一个通用的“编辑”链接
@CharlyDelta 谢谢，更新了:)
@evc：如果我想共享可通过所有“子”控制器访问的变量和函数怎么办？以及 Dependency 怎么样，比如 MainController 必须依赖 GrandchildController ？
@denny 很好，然后所有控制器都分开了。如果您通过服务thinkster.io/a-better-way-to-learn-angularjs/services在控制器之间共享数据，那很好
@denny 看ChildController控制器，它没有$scope.timeOfDay，所以它会从MainController继承它