将值从一个 child 组件传递到另一个组件

Question

（使用 angular 1.5）

我有一个 parent 组件（主要）将一堆数据传递给 child 组件（child1）。

此 child 组件 (child1) 在 table 中显示数据。 table 的行有一个 ng-click，它在单击时存储一个值（整数）。

这里是主要成分的html：

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

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

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

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

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

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

bindings: {
  sentId: '='
},

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

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

编辑（更多代码）： Child 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>

Answer 1

Child1 不应是 AngularJS 组件，因为它会修改其范围之外的数据。所以我把它作为一个指令。请参阅此处的文档： 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 可以是如下所示的组件，因为它只显示数据，不会更新其自身范围之外的任何内容。

查看下面的代码：

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

将值从一个 child 组件传递到另一个组件

Passing value from one child component to another

angularjs

angular-components