AngularDart components and model binding

问题:

Is it possible to bind an AngularDart ngComponent to a model and then manipulate that model from the component and see the changes outside of the changes outside of ngComponent. For example

<myawsomecomponent ng-model="{{name}}"></myawesomecomponent>
<label>{{name}}</label>

myAwesomeComponent will do some kind of magic (for example capitalise all letters) to the model and that should be reflected outside of the component.

What's the best way to do something like this in AngularDart?

回答1:

Great question! To accomplish this task, you would inject the NgModel directive into myAwesomeComponent. Then you'll be able to get and set the model through NgModel.modelValue.

@NgComponent(
  selector: 'myawesomecomponent',
  ...
)
class MyAwesomeComponent {
  NgModel _ngModel;
  MyAwesomeComponent(this._ngModel);

  ...
}

By adding an ng-model attribute to your element, Angular creates a NgModel directive. The injection system will give you the NgModel for your particular element.

Take a look at how other NgModel directives are written, such as InputCheckboxDirective