有人告诉我将AngularJS的component合并到我的应用程序中。在使用组件之前，我有两个控制器，分别是patentList和patentItem。当用户单击patent list中的项目时，它将加载有关该特定patent item的更多详细信息。
现在，我已将控制器包含在components中，数据无法填充patent item表。这归结于（我认为）patent item是patent list的子级，并且我能够访问父级数据。
当我记录所选项目时，它将显示所有属性和值。
我的问题是，使用controller后如何访问父components的数据？任何帮助将不胜感激
列表专利
<tr ng-repeat="x in $ctrl.patents">
<td ng-click="$ctrl.select(x)"><a ui-sref="patents.list.item({id: x.id})">{{x.applicationNumber}}</a></td>
<td ng-bind="x.clientRef"></td>
<td ng-bind="x.currentRenewalCost">$</td>
<td ng-bind="x.costBandEndDate"></td>
<td ng-bind="x.renewalCostNextStage"></td>
<td ng-bind="x.renewalDueDate"></td>
</tr>
专利项目
<tr ng-repeat="x in $ctrl.patentItem">
<td><input type="text" ng-model="x.patentApplicationNumber"></td>
<td><input type="text" ng-model="x.clientRef"></td>
<td><input type="text" ng-model="x.renewalStatus"></td>
<td><input type="text" ng-model="x.costBandEndDate"></td>
<td><input type="text" ng-model="x.renewalCostNextStage"></td>
<td><input type="text" ng-model="x.renewalDueDate"></td>
</tr>
app.js
var app = angular.module('myApp', ['ngRoute', 'ui.router']);
app.config(function($stateProvider, $locationProvider, $urlRouterProvider, localStorageServiceProvider) {
app.component('patentList', {
scope: {},
templateUrl: "templates/patents/list/list-patents.htm",
controller: function(loadPatentsService, loadPatentItemService) {
var vm = this;
vm.select = function(item) {
vm.patentItem = loadPatentItemService.select(item);
console.log(item)
}
}
})
});
app.component('patent', {
scope: {},
templateUrl: "templates/patents/list/patent-item.htm",
controller: function(patentTabService, loadPatentItemService) {
var vm = this;
//LOAD OF CODE FOR A TAB PANEL
}
})
app.factory('loadPatentItemService', function() {
var factory = {};
factory.select = function(item) {
factory.storeSelect = [];
selectedItem = item;
factory.storeSelect.push(selectedItem)
return [selectedItem];
}
return factory;
})
app.factory('patentTabService', function() {
var factory = {};
//CODE RELATED TO THE TAB PANEL
return factory;
});
最佳答案
组件间通信
这可以通过为require属性提供对象映射在组件中实现。对象键指定属性名称，在这些属性名称下，所需的控制器（对象值）将绑定到所需组件的控制器。
有关更多信息，请参见
AngularJS Developer Guide - Intercomponent Communication
AngularJS Comprehensive Directive API Reference - require
关于javascript - 如何在angularjs的组件中访问父 Controller 数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44696456/