将值从一个子组件传递到另一个子组件答案

【问题标题】：Passing value from one child component to another将值从一个子组件传递到另一个子组件
【发布时间】：2016-11-30 02:18:57
【问题描述】：

（使用角度 1.5）

我有一个父组件（main）将一堆数据传递给一个子组件（child1）。

此子组件 (child1) 在表格中显示数据。表格的行有一个 ng-click，点击时会存储一个值（一个整数）。

这里是主要组件的html：

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

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

可以看到 child1 将 stuff 数组存储为数据（绑定在 child 1 组件中）

我这样存储被点击的表值：

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

然后在 child2 中我像这样绑定 sendId

bindings: {
  sentId: '='
},

只是尝试在 html 中显示它，但它没有通过。

我觉得他的东西很简单。谢谢

编辑（更多代码）：子 1 个组件

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 组件

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>

【问题讨论】：

您能提供更多上下文吗？
你可以为你的问题发布更多代码
我根据您的附加代码更新了下面的答案。

标签： angularjs angular-components

【解决方案1】：

Child1 不应该是 AngularJS 组件，因为它会修改其范围之外的数据。所以我做了一个指令。请参阅此处的文档： https://docs.angularjs.org/guide/component

组件只控制自己的视图和数据：组件应该永远不要修改任何超出其自身范围的数据或 DOM。一般，在 Angular 中，可以在应用程序的任何位置修改数据通过范围继承和监视。这个很实用，但也可以当不清楚应用程序的哪个部分是时会导致问题负责修改数据。这就是为什么组件指令使用隔离作用域，因此整个作用域操作类不是可能。

Child2 可以是如下所示的组件，因为它只显示数据并且不会更新其自身范围之外的任何内容。

请看下面的代码：

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

【讨论】：