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语法＆amp;扩展Angular控制器。原型继承

1 个答案: