组件通过一个控制器将数据提供给另一个组件

Question

我希望组件 dbServerTable 在单击 dbServerTable 模板中的列表项时将数据提供给 dbServerInfoSidebar，但 dbServerInfoSide bar 中没有显示任何数据。

(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>