重用控制器函数+扩展控制器

Question

我有一个页面，由几个面板组成，它们的结构非常相似。他们每个人使用一个控制器。但是由于它们的相似性，我重复使用控制器的功能如下：

function panelController($scope) {
 ...
}
angular.module('myApp.controllers')
    .controller('panel1Controller', panelController);
angular.module('myApp.controllers')
    .controller('panel2Controller', panelController);

结果是，panel1和panel2有各自不同的作用域，但是在视图可以绑定到什么方面看起来是一样的。

然而，现在我想对panel3使用相同的模式，但只需稍微扩展一下。也就是说，我只想在$scope for panel3中包含一些内容。因此，理想情况下，我希望能够做这样的事情：

function panel3ControllerExtension($scope) {
   $scope.panel3Field = "I must only live in panel3";
}
angular.module('myApp.controllers')
    .controller('panel3Controller', panelController, panel3ControllerExtension);

但这不可能。有什么好的模式吗？

编辑:类似的面板只有在他们期望$scope包含的内容上是相似的。具体来说，expect作用域包含一个customer对象。例如，panel1绑定到$scope.customer.name，panel2绑定到$scope.customer.phone。...So，因为它们看起来不一样，行为也不一样，所以我不认为制定它们的指令是可行的。如果我错了就纠正我。

Answer 1

角控制器被有效地用作构造函数。因此，Javascript中的“继承”规则适用于它们。扩展的一些方法：

1. apply/call --“基本”函数： 函数panel3Controller($scope) { //将panelController的功能添加到这个范围//在OO术语中，这可以被认为是调用super构造函数panelController.call( this，$scope)；//添加panel3特定的功能$scope.panel3SpecificThing =“.”；} //只是注册新的控制器angular.module('myApp.controllers') .controller(‘panel3 3Controller，panel3Controller)； 只要对代码进行最小的修改，这个方法可能会得到您想要的东西。
2. 使用JS继承:使控制器成为JS“类”，并让子控制器原型地从它继承。您还可能希望在使用controller as语法时使用此方法： 函数PanelController($scope) { this.$scope = $scope；this.something =‘.’；} PanelController.prototype.someMethod = function() {.}函数Panel3Controller($scope) { PanelController.call(this，$scope)；this.somethingElse =‘.’；} Panel3Controller.prototype =新的PanelController()；Panel3Controller.prototype.constructor = Panel3Controller；this.something=函数(){. }； 如果您使用的是ES2015，可以简化上面的内容： 类PanelController {构造函数($scope){.}.}类Panel3Controller扩展PanelController {构造函数($scope){ super($scope)；.}.} 同样，您只需注册新的控制器： angular.module('myApp.controllers') .controller(‘Panel3Controller 3.controller’，Panel3Controller)； 如果属性和方法放置在控制器中，如下图所示，请使用controller as语法，即在HTML中：
3. 根据控制器的确切功能，并且正如注释中所指出的，您可能能够在一个或多个服务中提取控制器的功能。然后控制器将成为这些服务的薄包装器。同样，这是否是一个好主意取决于控制器的确切功能。

至于指令:它们总是要走的路:)，您可以重用您的代码作为指令的控制器，而不是在ng-controller中使用它。您甚至可以使用两个具有不同模板的指令(例如，customer.name和customer.phone绑定)和相同的控制器。