Передача значения из одного дочернего компонента в другой

(используя угловой 1.5)

У меня есть родительский компонент (основной), передавая кучу данных дочернему компоненту (child1).

Этот дочерний компонент (child1) отображает данные в таблице. Строки таблицы имеют щелчок ng, который сохраняет значение при нажатии (целое число).

Вот HTML-код основного компонента:

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

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

Вы можете видеть, что child1 хранит массив вещи как данные (которые связаны с дочерним компонентом 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>
Источник

1 ответ

Решение

Child1 не должен быть AngularJS Component, потому что он изменяет данные вне его области видимости. Поэтому я сделал это директивой. См. Документацию здесь: 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>

Источник
Другие вопросы по тегам