AngularJS 如何通过代码获取或实例化组件控制器

问题背景 #

在AngularJS的实际开发中，组件的控制器会在组件被模板调用、完成DOM初始化时才完成实例化。通常我们通过模块注册组件的写法如下：

angular.module('moduleName').component('componentName', { 
  // 组件配置逻辑
})

注册完成后，在模板中通过自定义标签的形式调用组件：

<componentName></componentName>

核心疑问：能否像获取全局服务实例那样获取组件控制器实例？类似我们常用的服务获取方式：

injector.get('serviceName')

实际需求：在组件被模板渲染调用之前，就通过编程方式直接调用、访问对应组件控制器的方法。 #

核心结论 #

没法像拿服务实例那样直接通过injector.get拿到组件控制器实例。
原因很简单：AngularJS的控制器实例是和具体组件的DOM挂载、独立作用域绑定的，根本没有全局单例的注册机制，控制器的生命周期完全跟着组件渲染流程走，从一开始就不会被放进injector的全局可检索条目里。

可落地的实现方案 #

• 优先采用标准架构调整：把需要提前调用的公共逻辑从组件控制器里抽出来，注册成独立服务
  服务本身就是AngularJS内置的全局单例，注册后随时可以通过injector.get获取调用，组件控制器只保留视图交互相关的逻辑，业务逻辑全部下沉到服务层。这种方式完全符合框架设计规范，既满足提前调用的需求，也不会破坏组件的封装性，是绝大多数场景下的最优解。
• 特殊场景下手动实例化控制器
  如果确实有绕不开的场景，必须在组件渲染前拿到控制器对象，可以手动走控制器实例化流程，不需要等待DOM渲染：
  1. 从模块的调用队列里找到对应组件的配置项，拿到控制器构造函数
  2. 注入$controller服务，手动构造控制器需要的依赖参数完成实例化
  3. 手动触发控制器的$onInit初始化逻辑
     示例代码：

  // 从模块的调用队列中定位目标组件的配置
  let componentConfig = angular.module('moduleName')._invokeQueue.find(item => {
    return item[1] === 'component' && item[2][0] === 'componentName'
  })[2][1];
  
  // 拿到内置的$controller服务
  let $controller = injector.get('$controller');
  
  // 手动实例化控制器，传入依赖的服务和模拟作用域
  let ctrlInstance = $controller(componentConfig.controller, {
    // 按控制器的依赖要求注入对应服务即可
    $scope: injector.get('$rootScope').$new()
  });
  
  // 手动触发原生初始化钩子
  ctrlInstance.$onInit();
  
  // 之后就可以直接调用实例上挂载的方法
  

  关键注意点：
  1. 这种方式创建的控制器实例，和后续模板渲染时框架自动创建的实例是完全独立的两个对象，没有任何状态关联。除非你手动把这个实例指定为组件绑定的控制器，否则完全不会影响页面上实际渲染的组件状态。
  2. 读取模块_invokeQueue的操作是访问AngularJS的内部存储结构，不属于公开API范围，框架大版本迭代时可能存在兼容问题，生产环境使用前需要做好对应版本的验证。
• 关联已渲染组件的场景
  如果你的需求是和页面上已经渲染好的组件实例交互，可以通过组件bindToController暴露API、配合父作用域的require引用机制获取实例，但这种方式必须等组件完成渲染才能拿到引用，满足不了"组件被调用前就访问控制器方法"的要求。

避坑提示：手动实例化控制器属于绕开AngularJS原生生命周期的非常规操作，很容易出现依赖缺失、上下文丢链的问题，没有特殊场景约束的话，优先选择把公共逻辑抽为独立服务的标准实现方式。

内容的提问来源于stack exchange，提问作者Vineet