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

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>