在子组件中如何从父组件访问变量？

我正在尝试使用两个组件在Angular应用程序中抽象出一个票据列表构建的概念。

第一个组件（智能组件）使用$http来获取数据，并将其放入父组件（gather）控制器中的一个名为populatedList的数组中。这部分工作正常。

第二个组件（笨组件）对于父组件中populatedList变量中的每个键值对，应该创建一个列表项。然而，尽管我将它注册到了同一个模块中，但第二个组件的onInit()函数从未被调用。当我通过浏览器查看HTML模板代码时，它也没有实例化。我在控制台上没有收到任何错误提示，那么我做错了什么？为什么我的第二个组件不起作用，即使我使用“require”从父组件中获取信息。

我最终让我的子组件看到了从pullTicketCtn控制器的populated "tickets"变量中的数据（通过屏幕截图证明），但是当我尝试console.log(vm.parentComp.tickets)或console.log(vm.tickets)时，它给了我一个空数组，即使我刚刚做了console.log(vm.parentComp)和console.log(vm)并通过控制台看到了数组中的值。

所以现在console.log(vm.parentComp.tickets)和console.log(vm)都显示我的displayTicketsCnt和pullTicketsCnt控制器都有tickets变量，但是我无法在子组件中访问它，也无法console.log()它。我做错了什么？

组件：

// 父组件/智能组件

var gather = {

controller: pullTicketsCnt,

controllerAs: 'pullTicketsCntAs',

bindings: {

tickets: '=',

client_id: '='

}

};

// 子组件/笨组件

var list = {

transclude: true,

require: {

parentComp: '^gather'

},

template: [

'

',

'

• ',

  ' {{key}}',

  '

',

'

'

].join(''),

controller: displayTicketsCnt,

controllerAs: 'displayTicketsCntAs'

};

控制器：

// 父控制器

function pullTicketsCnt($http) {

$http ...

this.tickets = temp.slice(0); // 获取填充数据的数组

...

}

// 子控制器

function displayTicketsCnt() {

var vm = this;

vm.$onInit = function() {

console.log('LIST-DATA组件已初始化');

console.log(vm.parentComp);

console.log(vm);

vm.populated = (vm.parentComp.tickets).slice(0);

console.log(vm.parentComp.tickets); // 这两行代码打印出空数组

console.log(vm.populated);

}

}

声明：

var app = angular.module('ticket', [])

.controller('listCtrl', listCtrl)

.component('gather', gather)

.component('list', list);

HTML：