如何在AngularJS渲染的React组件中嵌入AngularJS组件？

AI 小北

2026-8-13

问题：AngularJS组件嵌套React组件后，能否再嵌套AngularJS组件？

具体场景结构如下：

<angularjs-component-1>
    <react-component>
        <angularjs-component-2>
        </angularjs-component-2>
    </react-component>
</angularjs-component-1>

当前环境为AngularJS应用，可访问独立仓库导出并挂载到window对象的React组件库。在<angularjs-component-1>中能获取<react-component>的ref，需要在其中注入<angularjs-component-2>，目前仅能实现文本追加，不清楚如何注入AngularJS组件/指令。

本人对AngularJS经验有限，不确定能否从<angularjs-component-1>访问<angularjs-component-2>并传递给React组件，且因React组件存放在独立仓库，无法使用angular2react工具。

已找到解决方案

在<angularjs-component-1>中定义一个方法传递给<react-component>，该方法由React调用并传入用于放置<angularjs-component-2>的div的ref，具体逻辑如下：

function sendRef(ref) {
  var $angularComponent2 = angular.element('<angularjs-component-2 ng-model="propName"></angularjs-component-2>');
  var reactComponent = angular.element(ref.current);
  reactComponent.append($angularComponent2);

  reactComponent.injector().invoke(function($compile) {
    var scope = angular.element($angularComponent2).scope();
    // 如需给angular-component-2的scope赋值，可在此处操作
    scope.propName = $scope.someValue;
    $compile($angularComponent2)(scope);
  });
}