Passing value from one child component to another

Question

(using angular 1.5)

I have a parent component (main) passing an bunch of data to a child component (child1).

This child component (child1) displays the data in a table. The rows of the table have an ng-click that stores a value when clicked (an integer).

here is the html of the main component:

<child2 sent-id = "$ctrl.sendCopy"></child2>

<child1 data = "$ctrl.stuff"></child1>

You can see child1 stores the stuff array as data (which is bound in the child 1 component)

I store the table value that is clicked like this:

function Child1Controller(){
  this.storeId = function(id){
   this.sendCopy = id;
 }
}

then in child2 I bind sentId like so

bindings: {
  sentId: '='
},

And just try to display it in the html but it isnt getting passed.

I feel like his is something really simple. Thanks

EDIT (more code): Child 1 component

angular.module('main').component('child1', {
templateUrl: 'scripts/components/child1.html',

bindings: {
 data: '<',
},
controller: Child1Controller
});

function Child1Controller($log){
 this.storeId = function(id){
  this.sendCopy = id;
 }
}

Child1 html:

<div class="panel panel-default">
    <div class="panel-body">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Name</th>
            <th>Id</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-click="$ctrl.storeId(data.id)"  ng-repeat="data in $ctrl.data | filter:data.name">
            <td>{{data.name}}</td>
            <td>{{data.id}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Child2 component

angular.module('main').component('child2', {

  templateUrl: 'scripts/components/child2.html',

  bindings: {
    sentId: '='
  },

  controller: Child2Controller

});

function Child2Controller() {

}

Child2 html

<div class="panel panel-default">
  <div class="panel-body">
    <div>
    </div>
    <div>
       ID = {{ $ctrl.sentId }}
    </div>
  </div>
</div>

could you provide more context?

jkris
– jkris

2016-11-30 02:21:13 +00:00
Commented Nov 30, 2016 at 2:21 — jkris
– jkris, Commented Nov 30, 2016 at 2:21
can you post more code for your question

Ajaykumar
– Ajaykumar

2016-11-30 02:30:47 +00:00
Commented Nov 30, 2016 at 2:30 — Ajaykumar
– Ajaykumar, Commented Nov 30, 2016 at 2:30
I updated my answer below based on your additional code.

Todd Palmer
– Todd Palmer

2016-11-30 16:07:18 +00:00
Commented Nov 30, 2016 at 16:07 — Todd Palmer
– Todd Palmer, Commented Nov 30, 2016 at 16:07

Todd Palmer · Accepted Answer · 2016-12-01 16:11:09Z

Child1 should not be an AngularJS Component because it modifies data outside of its scope. So I made that a directive. See documentation here: https://docs.angularjs.org/guide/component

Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. Normally, in Angular it is possible to modify data anywhere in the application through scope inheritance and watches. This is practical, but can also lead to problems when it is not clear which part of the application is responsible for modifying the data. That is why component directives use an isolate scope, so a whole class of scope manipulation is not possible.

Child2 can be a Component as shown below because it only displays data and doesn't update anything outside of its own scope.

See the code below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AngularJS Example</title>
    <!-- AngularJS -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

</head>
<body ng-app="main">

<div ng-controller="MyCtrl">

    <child1 data="data" send-copy="myStore"></child1>
    <child2 sent-id="myStore"></child2>

</div>

<script>
    var app = angular.module('main',[]);
    app.controller('MyCtrl', ['$scope', function($scope) {
        $scope.data=[
            {"name":"A","id":123},
            {"name":"B","id":456},
            {"name":"C","id":789}
        ];
    }]);

    app.controller('Child1Controller', ['$scope', function($scope) {
        $scope.storeId = function(id){
            $scope.sendCopy = id;
        }
    }]);

    app.directive('child1',function(){
        return {
            restrict: 'E',
            template: '<div class="panel panel-default"><div class="panel-body">' +
            '<table class="table table-hover">' +
            '<thead><tr><th>Name</th><th>Id</th></tr></thead>' +
            '<tbody>' +
            '<tr ng-click="storeId(store.id)" ng-repeat="store in data">' +
            '<td>{{store.name}}</td><td>{{store.id}}</td></tr>' +
            '</tbody></table></div></div></div>',
            controller : "Child1Controller",
            scope: {
                data : "=",
                sendCopy : "="
            }
        };
    });

    app.component('child2', {
        template: '<div class="panel panel-default">' +
        '<div class="panel-body">' +
        '<div></div>' +
        '<div>ID = {{ $ctrl.sentId }}</div>' +
        '</div></div>',
        bindings: {
            sentId: '<'
        },
        controller: Child2Controller
    });

    // Controller for child2 Component
    function Child2Controller() {
    }
</script>
</body>
</html>

Collectives™ on Stack Overflow

Passing value from one child component to another

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related