How to pass ngModel to AngularJS component without 2-way binding?

Question

I have custom input as AngularJS 1.5 component with one-way data bindings and ngModel as two-way data binding:

return {
     bindings: {
       form: "<",
       fieldName: "@",
       minLength: "@",
       maxLength: "@",
       isRequired: "@",
       errors: "<", 
       value: "=ngModel"
     },
     templateUrl: "actTextField.html",
     controller: ActTextFieldController,
   }

in file actTextField.js in provided Plunk. I want to follow A new Angular 1.x ES2015 styleguide, the path to Angular 2 where Todd wrote:

We no longer should utilise two-way data-binding through '=' syntax for bindings

Use one-way databinding '<' and functions '&'

So, 2-way data binding for ngModel may not be a good choice, it should be 1-way. On the other hand, I want to keep component as simple as possible - without, for example, on-change callback. It should act close to native input with ngModel directive. Is it possible to pass ngModel to component without 2-way data binding and at the same time be able to change its value from a component, to avoid (for example) additional callbacks? Thank you in advance for every answer.

LD Robillard · Accepted Answer · 2016-08-15 12:02:21Z

3

If you plan on using angular component, try use one way binding wisely. The upper parent hosting the model in his viewmodel should be the only one to be able to modify it. if you want the child component to modify the model, you need to pass along a function this way:

bindings: {
   updateUsername : '&', // Function
   user : '<'            // Model
}

They did it this way to simplify angular concept and to reduce the number of events on the page using directives.

answered Aug 15, 2016 at 12:02

LD Robillard

4344 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Radek Anuszewski Over a year ago

Looks like it really can not be done without callbacks.

Collectives™ on Stack Overflow

How to pass ngModel to AngularJS component without 2-way binding?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related