My goal is for the component dbServerTable to provide data to dbServerInfoSidebar whenever a list item from dbServerTable's template is clicked. However, I am experiencing an issue where no data is being displayed in 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);
It is worth noting that both components share the same controller.
//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>
Upon clicking a list item, the selectServer() function successfully captures the item, but it fails to pass it to the dbServerInfoSidebar.html.
I would greatly appreciate any guidance on how to establish this data connection. Feel free to provide code examples as well :)