使用 controllerAs 语法和原型继承扩展 Angular 个控制器

Question

我正在尝试使用 conrollerAs 语法扩展控制器。我的父子控制器没有定义在同一个范围内，所以我把父控制器（BaseController）放在一个服务中：

angular.module('myApp').factory('BaseController', function() {
  var BaseController = function(fooService, barService) {
    // base controller constructor logic
  }

  BaseController.prototype = {
    // base controller methods
  }

  return BaseController;
});

然后像这样使用它：

var ChildController = function(BaseController, fooService, barService) {
  BaseController.apply(this, [fooService, barService]);
}

var BaseController = angular.injector(['myApp']).get('BaseController');

ChildController.prototype = Object.create(angular.extend(BaseController.prototype, {
  fooMethod: function() {
    // do stuff
  }
}));

angular.module('myApp').controller('ChildController', ChildController);

我在 ui 路由器状态下使用 ChildController。状态模板未加载，我在控制台中收到错误消息：

Resource for page controller is not defined <div class="ng-scope" ui-view="foo-view">

有什么想法吗？

Answer 1

angular.injector 创建一个新的注入器实例（这是应用程序实例，如果听起来更好的话）并且不应在 Angular 应用程序中用于生产。即

angular.injector(['myApp']).get('BaseController') !== angular.injector(['myApp']).get('BaseController');

当您仍然能够注册控制器时，您需要着手处理 BaseController 依赖项，唯一可以执行此操作的地方是配置阶段，

angular.module('myApp').config(function($controllerProvider, BaseController) {
  ...
  $controllerProvider.register('ChildController', ...)
});

这要求 BaseController 为 constant，而不是 factory，并且可能会限制您希望使用它执行的操作。听起来没那么好笑，不是吗？

所以在这里做的更好的事情就是

var ChildController = function(BaseController, fooService, barService) {
  angular.extend(this, BaseController.prototype, { ... });
  BaseController.apply(this, [fooService, barService]);
}

angular.module('myApp').controller('ChildController', ChildController);

Angular 由于上述原因，DI 不适用于 OOP JS，仍需要补充其他模块化解决方案。

使用 controllerAs 语法和原型继承扩展 Angular 个控制器

Extend Angular controllers using controllerAs syntax & prototypical inheritance

javascript

angularjs

angularjs-controlleras