【问题标题】：how to access parents controller data within component in angularjs如何在angularjs的组件中访问父控制器数据
【发布时间】：2017-11-25 13:25:33
【问题描述】：

有人告诉我要将 AngularJS 的 component 合并到我的应用程序中。在使用组件之前，我有两个控制器，patentList 和patentItem。当用户单击patent list 中的项目时，它将加载有关该特定patent item 的更多详细信息。

现在我已将控制器包含在components 中，数据无法填充patent item 表。这归结为（我认为）patent item 是patent list 的孩子，我能够访问父母的数据。

当我记录所选项目时，它会显示所有属性和值。

我的问题是，现在我使用了components，如何访问父级controller 的数据？任何帮助将不胜感激

专利列表

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

});

【问题讨论】：

为什么patentList 组件的定义在配置块中？还请显示路由器的状态表。

标签： javascript angularjs angularjs-components

【解决方案1】：

您可以将$emit/$broadcast 与$scope.$on 一起使用

here is the plunker for your reference

【讨论】：

【解决方案2】：

你需要使用$broadcast和$on

$scope.$broadcast ('key', {data: value}); //to set the value in parent 

 $scope.$on('key', function (event, data) {}); // to get the value in child

【讨论】：

【解决方案3】：

组件间通信

这可以通过为require 属性提供对象映射在组件中实现。对象键指定所需控制器（对象值）将在其下绑定到所需组件的控制器的属性名称。

有关详细信息，请参阅

【讨论】：