傳遞從一個子組件值到另一個

我有一個父組件（主）傳遞數據的一堆到一個子組件（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

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

傳遞從一個子組件值到另一個

回答

相關問題