gpt4 book ai didi

javascript - 组件通过一个 Controller 向另一个组件提供数据

转载 作者:行者123 更新时间:2023-11-28 17:51:35 25 4
gpt4 key购买 nike

我希望组件 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);

它们共享同一个 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>

当我单击列表项时,selectServer() 会抓取该项目,它确实这样做了,并且应该将其传递给 dbServerInfoSidebar.html,但事实并非如此。

有人可以告诉我如何建立此数据连接吗?欢迎使用代码示例:)

最佳答案

您创建了两个组件,但您希望它们共享 AppCtrl Controller 的同一个实例。不是这种情况。将创建 AppCtrl 的两个实例。每个组件一个。在 dbServerTable 组件中操作 $scope.selectedItem 不会更改 dbServerInfoSidebar$scope.selectedItem 的值。

您想要实现的目标可以通过创建将注入(inject)到 Controller 中的服务来完成。在此服务上,您可以设置selectedItem。默认情况下,服务被创建为单例。这意味着两个 Controller 将获得相同的服务实例。这样,当您更改服务中 selectedItem 的值时,更改将反射(reflect)在两个组件中。

示例:

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

关于javascript - 组件通过一个 Controller 向另一个组件提供数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45414074/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com