如何通过ng-click在旧AngularJS中调用新Angular的函数？

针对你在渐进式迁移中遇到的「AngularJS 按钮触发 Angular Material 弹窗」需求，以下是三种落地性强的实现方案，附代码示例和适用场景：

方案一：封装 Angular 组件嵌入 AngularJS #

将按钮和弹窗触发逻辑封装成独立的 Angular 组件，通过 Angular 的 UpgradeModule 注册为 AngularJS 可用的指令，直接替换旧模板中的按钮。

实现步骤 #

1. 创建 Angular 组件

// new-open-dialog-btn.component.ts
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { YourMaterialDialogComponent } from './your-material-dialog.component';

@Component({
  selector: 'new-app-open-dialog-btn',
  template: `
    <button class="btn btn-secondary" (click)="openDialog()">Open Dialog</button>
  `
})
export class NewOpenDialogBtnComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(YourMaterialDialogComponent);
  }
}

2. 注册组件到 AngularJS
   在 Angular 根模块中配置 UpgradeModule，将组件升级为 AngularJS 可识别的指令：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { UpgradeModule } from '@angular/upgrade/static';
import { NewOpenDialogBtnComponent } from './new-open-dialog-btn.component';
import { YourMaterialDialogComponent } from './your-material-dialog.component';

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, MatDialogModule, UpgradeModule],
  declarations: [NewOpenDialogBtnComponent, YourMaterialDialogComponent],
  entryComponents: [YourMaterialDialogComponent]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['oldAngularJSApp'], { strictDi: true });
    this.upgrade.upgradeAdapter.upgradeNg2Component(NewOpenDialogBtnComponent);
  }
}

3. 替换 AngularJS 模板

<!-- 替换原按钮代码 -->
<new-app-open-dialog-btn></new-app-open-dialog-btn>

优缺点 #

• 优点：组件封装性强，逻辑完全隔离在 Angular 侧，后续全量迁移时可直接保留，符合 Angular 开发规范。
• 缺点：需要配置 UpgradeModule，初期有一定配置成本。

方案二：通过共享服务让 AngularJS 调用 Angular 逻辑 #

在 Angular 中创建弹窗服务，将其升级为 AngularJS 可注入的服务，修改旧控制器的 openDialog 方法调用该服务。

实现步骤 #

1. 创建 Angular 弹窗服务

// dialog.service.ts
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { YourMaterialDialogComponent } from './your-material-dialog.component';

@Injectable({ providedIn: 'root' })
export class DialogService {
  constructor(private dialog: MatDialog) {}

  openMaterialDialog() {
    return this.dialog.open(YourMaterialDialogComponent);
  }
}

2. 注册服务到 AngularJS 注入器

// app.module.ts
import { NgModule } from '@angular/core';
// 其他必要导入...
import { DialogService } from './dialog.service';

@NgModule({
  // 其他配置...
})
export class AppModule {
  constructor(private upgrade: UpgradeModule, private dialogService: DialogService) {}

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['oldAngularJSApp'], { strictDi: true });
    // 将 Angular 服务注册到 AngularJS 注入器
    this.upgrade.injector.get('$injector').register('dialogService', () => this.dialogService);
  }
}

3. 修改 AngularJS 控制器

// fileController.js
angular.module('oldAngularJSApp').controller('FileController', ['$scope', 'dialogService', function($scope, dialogService) {
  $scope.openDialog = function() {
    dialogService.openMaterialDialog();
  };
}]);

优缺点 #

• 优点：无需修改模板，保留原有按钮结构，适合不想改动大量模板的渐进式迁移场景。
• 缺点：AngularJS 与 Angular 逻辑存在耦合，后续全量迁移后需清理 AngularJS 侧的调用代码。

方案三：全局对象临时过渡（仅适合短期验证） #

将 Angular 的弹窗触发方法挂载到全局 window 对象，直接在 AngularJS 控制器中调用，适合快速验证功能的临时场景。

实现步骤 #

1. Angular 侧挂载全局方法

// app.component.ts
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { YourMaterialDialogComponent } from './your-material-dialog.component';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {
  constructor(private dialog: MatDialog) {
    (window as any).openMaterialDialog = () => {
      this.dialog.open(YourMaterialDialogComponent);
    };
  }
}

2. 修改 AngularJS 控制器

// fileController.js
angular.module('oldAngularJSApp').controller('FileController', ['$scope', function($scope) {
  $scope.openDialog = function() {
    window.openMaterialDialog();
  };
}]);

优缺点 #

• 优点：实现最简单，无需配置 UpgradeModule。
• 缺点：全局变量污染，耦合度极高，仅适合短期验证，不推荐长期使用。

方案选择建议 #

• 若计划逐步替换整个页面组件，优先选方案一，组件化迁移更符合长期规范。
• 若仅需临时替换弹窗逻辑、不想改动模板，选方案二，耦合度相对可控。
• 方案三仅用于快速验证功能，不建议在生产环境长期保留。

内容的提问来源于stack exchange，提问作者JanuszFrontEnd'u