Question

（使用角度1.5）

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

此子组件（child1）在表中显示数据。表的行有一个ng-click，用于存储单击时的值（整数）。

这是主要组件的html：

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

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

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

我存储了单击的表值，如下所示：

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

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

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>

Answer 1

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

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

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

请参阅以下代码：

＆＃13;

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

＆＃13;

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

1 个答案: