Angular JS data binding in component is not working

Question

I am using Angular JS 1.5.6 components to build dynamically a form. The hierarchy is the following : index.html calls component my-view which calls component my-form which calls unitary components like inputs and button.

The issue is that the data binding is not working because any modification in input components is not taken into account into my-view component.

Besides I have a weird behavior, each time I update input value, a call is made to view component function.

I have plunkered this, the submit button triggers console.log (so need to open firebug to see it in action).

Here is my index.html

<body ng-app="MyApp">
  <my-view></my-view>
</body>

Here is myView.html

<div class="container">
  <h2>With component myform</h2>
  <my-form form-elements="
    [{type:'input', label:'First name', placeholder:'Enter first name',model:$ctrl.userData.firstName, id:'firstName'},
    {type:'input', label:'Last name', placeholder:'Enter last name',model:$ctrl.userData.lastName, id:'lastName'},
    {type:'button', label:'Submit', click:$ctrl.click()}]"></my-form>
</div>

<div class="container">
  <h2>Check data binding</h2>
  <label>{{$ctrl.userData.firstName}}</label>
  <label>{{$ctrl.userData.lastName}}</label>
</div>

Here is myView.js

(function() {
  'use strict';

  angular.module('MyApp').component('myView', {
    templateUrl: 'myView.html',
    controller: MyViewController,
    bindings: {
      viewFormElements: '<'
    }
  });

  function MyViewController() {
    this.userData = {
      firstName: 'François',
      lastName: 'Xavier'
    };

    function click() {
      console.log("Hello " + this.userData.firstName + " " + this.userData.lastName);
    }

    this.click = click;
  }

})();

Moussa · Accepted Answer · 2016-06-23 07:20:03Z

1

I manage to solve my issue with 2 way binding and by putting form-element in an object instead of putting it directly in the view ($ctrl.formElements). It is on plunker.

myView.html

<div class="container">
    <h2>With component myform</h2>
    <my-form form-elements=$ctrl.formElements></my-form>
  </div>
  <div class="container">
    <h2>Check data binding</h2>
    <label>{{$ctrl.formElements}}</label><br />
 </div>'

answered Jun 23, 2016 at 7:20

Moussa

4,1547 gold badges36 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Angular JS data binding in component is not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related