コンポーネントは、1つのコントローラを介して別のコンポーネントにデータを提供します。

Question

dbServerTableのテンプレートのリスト項目をクリックしたときに、dbServerInfoSidebarにデータが表示されているときにdbServerInfoSidebarにデータを渡します。

(function(angular) { 
    'use strict'; 
    angular.module('SplashDamageApp').component('dbServerTable', { 
     templateUrl: 'dbServerTable.html', 
     controller: 'AppCtrl', 
    }); 
})(window.angular); 



(function(angular) { 
    'use strict'; 
    angular.module('SplashDamageApp').component('dbServerInfoSidebar', { 
     templateUrl: 'dbServerInfoSidebar.html', 
     controller: 'AppCtrl', 
    }); 
})(window.angular); 

両者は同じコントローラを共有します。

//AppCtrl 
    $scope.selectServer = function(item) 
    { 
     $scope.selectedItem = item; 
    } 


// dbServerTable.html 
<tr data-ng-repeat="item in items | filter:search | orderBy:'name'" data-ng-click="selectServer(item)"> 
     <td>{{item.display_name}}</td> 
</tr> 

//dbServerInfoSidebar.html 
<h1>{{selectedItem}}</h1> 

私は、リストの項目をクリックすると、SELECTserverの（）はそれがないアイテムを、つかみ、そしてそれがdbServerInfoSidebar.htmlにそれを渡す必要がありますが、そうでありません。

このデータの接続方法を教えてもらえますか？コード例は歓迎です:)

Answer 1

2つのコンポーネントを作成しますが、コントローラがAppCtrlコントローラの同じインスタンスを共有すると想定しています。これはそうではありません。 AppCtrlの2つのインスタンスが作成されます。各コンポーネントに1つ。 dbServerTableコンポーネントの$scope.selectedItemを操作しても、dbServerInfoSidebarの$scope.selectedItemの値は変更されません。

あなたが達成したいのは、コントローラに注入されるサービスを作成することです。このサービスでは、selectedItemを設定できます。サービスはデフォルトでシングルトンとして作成されます。これは、両方のコントローラが同じサービスのインスタンスを取得することを意味します。この方法で、サービス内のselectedItemの値を変更すると、変更は両方のコンポーネントに反映されます。

例：応答のための

// The shared service 
(function(angular) { 
     'use strict'; 
     angular.module('SplashDamageApp').service('DbServerService', function() { 
      this.selectedItem = undefined; 

     }); 
})(window.angular); 

// AppCtrl 
(function(angular) { 
     'use strict'; 
     angular.module('SplashDamageApp').controller('AppCtrl', ['$scope', 'DbServerService', function($scope, DbServerService) { 
      $scope.getSelectedItem = function() { 
       return DbServerService.selectedItem; 
      } 

      $scope.setSelectedItem = function(item) { 
       DbServerService.selectedItem = item; 
      } 

     }); 
}])(window.angular); 


// dbServerTable.html 
<tr data-ng-repeat="item in items | filter:search | orderBy:'name'" data-ng-click="setSelectedItem(item)"> 
    <td>{{item.display_name}}</td> 
</tr> 

//dbServerInfoSidebar.html 
<h1>{{getSelectedItem()}}</h1>