Передача значения из одного дочернего элемента к другому

(с использованием угловых 1,5)Передача значения из одного дочернего элемента к другому

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

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

вот 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, но он не пройдет.

Я чувствую, что его действительно просто. Благодаря

EDIT (больше кода): по уходу за детьми 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>

источник

2016-11-30 Alex

вы могли бы предоставить больше контекста? – jkris

Вы можете написать больше кода для Вашего вопроса – Ajaykumar

добавлен код! – Alex

Ребенок1 не должен быть компонентом AngularJS, поскольку он изменяет данные за пределами его объема. Поэтому я сделал эту директиву. Смотрите документацию здесь: https://docs.angularjs.org/guide/component

компоненты только контролировать свой взгляд и данных: Компоненты должны никогда не изменять любые данные или DOM, что находится вне их собственной области. Обычно в Угловом можно изменять данные в любом месте приложения через наследование и часы. Это практично, но может также привести к проблемам, когда неясно, какая часть приложения , ответственная за изменение данных. Вот почему в директивах компонента используется изоляционная область, поэтому целый класс манипуляций по объему не равен .

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>

источник

2016-11-30 03:43:28 Toddsden

Передача значения из одного дочернего элемента к другому

ответ

Смежные вопросы