Mouss Mouss - 7 months ago 72
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

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=""></my-input>


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: '@',

 <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.