javascript - 如何在angularjs中访问组件内的父 Controller 数据

Question

我被告知要将 AngularJS 的 组件 合并到我的应用程序中。在使用组件之前，我有两个 Controller ，patentList 和 patentItem。当用户点击专利列表中的项目时，它将加载有关该特定专利项目的更多详细信息。

现在我已将 Controller 包含在 组件 中，数据无法填充 patent item 表。这是因为(我认为)patent item 是 patent list 的子项，我能够访问父项数据。

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

我的问题是，现在我已经使用了组件，如何访问父级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;

});

Answer 1

组件间通信

这可以在组件中通过为 require 属性提供对象映射来实现。对象键指定属性名称，在这些属性名称下，所需的 Controller (对象值)将绑定(bind)到所需组件的 Controller 。

有关详细信息，请参阅

• AngularJS Developer Guide - Intercomponent Communication

• AngularJS Comprehensive Directive API Reference - require