1つの子コンポーネントから別の子コンポーネントに値を渡す

子コンポーネント（child1）に一連のデータを渡す親コンポーネント（main）があります。

この子コンポーネント（child1）は、データをテーブルに表示します。テーブルの行には、クリックしたときに値を格納するng-click（整数）があります。ここ

が主成分のhtmlです：（子1コンポーネントにバインドされている）あなたはデータとしてchild1の店舗にスタッフ配列を見ることができます

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

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

私はそのテーブルの値を格納しますこのようにクリックされた：

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

は、child2の中で、私はそう

よう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

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>

出典

2016-11-30 03:43:28 Toddsden

1つの子コンポーネントから別の子コンポーネントに値を渡す

答えて

関連する問題