将 Angular 组件属性双向绑定到 AngularJS 视图答案

【问题标题】：Two-way binding Angular component property to AngularJS view将 Angular 组件属性双向绑定到 AngularJS 视图
【发布时间】：2021-06-19 05:22:36
【问题描述】：

所以我们有一个用 AngularJS 编写的应用程序，正在慢慢迁移到 Angular 组件。

我现在正在构建一个简单的可重用组件，它基本上是一个带有标签的下拉框。这当然是在 Angular 中——所以我将它降级为 AngularJS，然后在 AngularJS 视图中使用它。

我现在如何将组件中的属性（我们称之为 MyDropdown.CurrentValue）双向绑定到 AngularJS 视图的范围变量（我们称之为 $scope.numberOfCarsOwned）？

该组件当然有@Input() CurrentValue: any; 和@Output() CurrentValueChange: EventEmitter<any>，绑定到内部下拉框。

在 Angular 中，我只需要使用 <MyDropdown [(CurrentValue)]="numberOfCarsOwned" />，但是在将组件（降级为指令）集成到我的 AngularJS 视图中时我该怎么做呢？

【问题讨论】：

【解决方案1】：

事实证明，一旦你知道怎么做，就很容易了：

在 AngularJS 视图中，您可以像在 Angular 中一样使用它：

<MyComponent
  [(CurrentValue)]="numberOfCarsOwned"
></MyComponent>

这将自动将CurrentValue（使用组件的CurrentValueChange）绑定到视图的$scope.numberOfCarsOwned。

【讨论】：