Question

60

Angular 1.5 component with ng-model

rated 0 times [ 61] [ 1] / answers: 1 / hits: 20542 / 8 Years ago, mon, june 20, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dewayneh

Add To Favorites

Follow

Total Points: 538

Total Questions: 114

Total Answers: 97

Location: Liberia

Member since Fri, Oct 22, 2021

3 Years ago

answered 8 Years ago timothyc · Accepted 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.