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

我希望组件dbServerTable在单击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>

//AppCtrl
$scope.selectServer=功能（项）
{
$scope.selectedItem=项目；
}
//dbServerTable.html
{{item.display_name}
//dbServerInfoSidebar.html
{{selectedItem}}

单击列表项时，selectServer（）会抓取该项，它会抓取该项，并将其传递到dbServerInfoSidebar.html，但不会

---

有人能告诉我如何连接这些数据吗？欢迎使用代码示例：）

您创建了两个组件，但希望它们共享AppCtrl控制器的相同实例。事实并非如此。将创建

AppCtrl

的两个实例。每个组件一个。操作

$scope。在
dbServerTable
组件中选择editem

不会更改

$scope的值。在
dbServerInfoSidebar
中选择editem

您想要实现的，可以通过创建一个服务来实现，该服务将被注入控制器中。在该服务上，您可以设置

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>

//共享服务
（功能（角度）{
"严格使用",；
angular.module（'SplashDamageApp'）。服务（'DbServerService'，函数（）{
this.selectedItem=未定义；
});
})（窗口角度）；
//AppCtrl
（功能（角度）{
"严格使用",；
angular.module（'SplashDamageApp'）。controller（'AppCtrl'，['$scope'，'DbServerService'，函数（$scope，DbServerService）{
$scope.getSelectedItem=function（）{
返回DbServerService.selectedItem；
}
$scope.setSelectedItem=函数（项）{
DbServerService.selectedItem=项目；
}
});
}])（窗口角度）；
//dbServerTable.html
{{item.display_name}
//dbServerInfoSidebar.html
{{getSelectedItem（）}}

您创建了两个组件，但希望它们共享

AppCtrl

控制器的相同实例。事实并非如此。将创建

AppCtrl

的两个实例。每个组件一个。操作

$scope。在
dbServerTable
组件中选择editem

不会更改

$scope的值。在
dbServerInfoSidebar
中选择editem

您想要实现的，可以通过创建一个服务来实现，该服务将被注入控制器中。在该服务上，您可以设置

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>

//共享服务
（功能（角度）{
"严格使用",；
angular.module（'SplashDamageApp'）。服务（'DbServerService'，函数（）{
this.selectedItem=未定义；
});
})（窗口角度）；
//AppCtrl
（功能（角度）{
"严格使用",；
angular.module（'SplashDamageApp'）。controller（'AppCtrl'，['$scope'，'DbServerService'，函数（$scope，DbServerService）{
$scope.getSelectedItem=function（）{
返回DbServerService.selectedItem；
}
$scope.setSelectedItem=函数（项）{
DbServerService.selectedItem=项目；
}
});
}])（窗口角度）；
//dbServerTable.html
{{item.display_name}
//dbServerInfoSidebar.html
{{getSelectedItem（）}}

感谢您的回复。有什么方法可以让你描述的东西快速代码模型化吗？我添加了一个简单的例子，我希望它会有所帮助。这为我解决了这个问题。非常感谢。谢谢你的回复。有什么方法可以让你描述的东西快速代码模型化吗？我添加了一个简单的例子，我希望它会有所帮助。这为我解决了这个问题。非常感谢。