組件通過一個控制器向另一個組件提供數據

Question

當dbServerTable模板中的列表項被單擊但dbServerInfoSidebar中沒有顯示數據時，我希望組件dbServerTable將數據提供給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

您創建了兩個組件，但您希望它們共享AppCtrl控制器的相同實例。不是這種情況。將創建兩個AppCtrl實例。每個組件一個。在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>