AngularJS: 控制器继承使用调用（或应用）

Question

这是我在尝试使我的控制器更具可重用性时发现的。

app.factory('BaseController', function(myService) {
  return function(variable) {
    this.variable = variable;
    this.method = function() {
      myService.doSomething(variable);
    };
  };
})

.controller("ChildController1", function($scope, BaseController) {
  BaseController.call($scope, "variable1");
})

.controller("ChildController2", function($scope, BaseController) {
  BaseController.call($scope, "variable2");
});

现在我可以在我的 HTML 中执行类似的操作（例如在 ng-controller="ChildController1" 中）：ng-click="method()"

代码很简单。但我不知道它到底是如何工作的（它是什么样的模式？），这样做是不是一个好习惯？

Answer 1

您的解决方案大致如下：

app.factory('mixinBaseController', function(myService) {
  return function (scope, variable) {
    angular.extend(scope, {
      variable: variable;
      method: function() {
        myService.doSomething(variable);
      }
    });
  };
})

.controller("ChildController1", function($scope, mixinBaseController) {
  mixinBaseController($scope, "variable1");
})

.controller("ChildController2", function($scope, mixinBaseController) {
  mixinBaseController($scope, "variable2");
});

你能看到吗？通过你的 .call($scope, ...) 只是将上下文 (this) 设置为真正的 $scope 这样 BaseController 只是用属性和函数扩展你的范围。

这只是为了演示您的代码是如何工作的。

要实现更JavaScript的继承，请看：

Can an AngularJS controller inherit from another controller in the same module?
AngularJS controller inheritance
AngularJS Inheritance Patterns
Two Approaches to AngularJS Controller Inheritance

你也应该看看 AngularJS 1.2 中引入的 "controllerAs" syntax。我强烈建议使用 controllerAs。这也应该有助于为您的控制器实现继承。

AngularJS: 控制器继承使用调用（或应用）

AngularJS: Controller inheritance using call (or apply)

angularjs

angularjs-controller

angularjs-factory