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

Question

So we have an application written in AngularJS, slowly migrating to Angular component-wise.

I'm now building a simple reusable component that is basically a dropdown box with a label. This is of course in Angular - so I downgrade it into AngularJS, then use it in an AngularJS view.

How can I now two-way bind a property from the component (let's call it MyDropdown.CurrentValue ) to a scope variable of the AngularJS view (let's call it $scope.numberOfCarsOwned )?

The component of course has both @Input() CurrentValue: any; and @Output() CurrentValueChange: EventEmitter<any> , bound to the inner dropdown box.

In Angular, I'd just go <MyDropdown [(CurrentValue)]="numberOfCarsOwned" /> , but how do I do this when integrating the component (downgraded as a directive) into my AngularJS view?

Answer 1

So it turns out, once you know how to do it it's totally easy:

In the AngularJS view, you use it as if you were in Angular:

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

This will automagically bind the CurrentValue (using the component's CurrentValueChange ) to the view's $scope.numberOfCarsOwned .