Mouss Mouss - 17 days ago 8
Javascript Question

Angular 1.5 component with ng-model

Is it possible to use ng-model with a component? I would like to bind a scope variable to a component with ng-model. I have plunkered my issue. I would like the component my-input to be binded to the variable from the scope userData.name.

I am using Angular JS 1.5.6 components, and want to avoid using directive.

<body ng-controller="MyCtrl">
<div class="container">
<h2>My form with component</h2>
<form role="form">
<div class="form-group">
<label>First name</label>
<my-input placeholder="Enter first name" ng-model="userData.name"></my-input>
</div>
</form>
</div>
</body>

Answer

I've fixed the plunker for you.

Names of you parameters have to correspond to the names in your component. You should be using camelCased names in your component and kebab-cased in your templates. Example:

  bindings: {
      myPlaceholder: '@',
      myModel:'='
    }

 <my-input my-placeholder="Enter first name" my-model="userData.firstName">

Regarding your question about using ng-model - you can use any parameter as far you define it in your component. In this case the name of your parameter should be ngModel.