子组件中父组件的角度(1.5)JS访问变量?

我试图用两个组件将一个票证列表的概念抽象成一个角度应用程序。

第二个组件-->(“哑组件”)对于父组件的populatedList var中的每个键值对,它应该创建一个列表项。

我终于让我的子组件看到了pullTicketCtn控制器中填充的“tickets”变量中的数据(通过屏幕截图显示),但当我尝试控制台时。日志(vm.parentComp.tickets)或控制台。log(vm.tickets)它给了我一个空数组,即使我刚刚做了控制台。日志(vm.parentComp)和控制台。日志(vm)并通过控制台查看阵列中的值。

那么现在控制台。日志(vm.parentComp.tickets)和控制台。log(vm)都显示我的displayTicketsCnt和pullTicketsCnt控制器都有tickets变量,但我无法在子级或控制台中访问它。log()它。我做错了什么?

pullticketCtn has the data/array

displayticketCtn has the data/array

第三张图显示了控制台的两个空阵列[]和[]。日志(vm.parentComp)和 安慰日志(vm);

     /*COMPONENTS*/
     /*Parent/smart */
   var gather = {  
    controller:pullTicketsCnt,
    controllerAs:'pullTicketsCntAs',
    bindings: {
        tickets: '=',
        client_id:'='
    }      
};

/* Child/dumb component*/
var  list =  {  
    transclude  : true,
    require:{
        /* Require the parent component (^ means its an ancestor)*/
        parentComp:'^gather'
    },
    template: [
        '<ul class="main_list">',
         '<li ng-repeat:"(key, value) in displayTicketsCntAs.tickets">',
        '<span>{{key}}</span>',
     '</li>',
        '</ul>',
    ].join(''),
    controller:displayTicketsCnt,
    controllerAs:'displayTicketsCntAs',
};

/*CONTROLLERS */
function pullTicketsCnt($http){

        $http ...
        this.tickets=temp.slice(0); //Get the array of populated data
        ...
    }
}




 function displayTicketsCnt(){
  var vm = this;
        vm.$onInit = function(){
           console.log('LIST-DATA component initialized');
           console.log(vm.parentComp);
           console.log(vm);
           vm.populated= (vm.parentComp.tickets).slice(0);
           /*The two lines below print [] the empty arrays */
           console.log(vm.parentComp.tickets); 
            console.log(vm.populated);
        }




}


function listCtrl(){
    this.tickets=[];
}

/*Declarations */

var app = angular.module('ticket', [])
.controller('listCtrl',listCtrl) /* Assume this is correct*/
.component('gather',gather) 
.component('list',list);

/* HTML*/ 
 <div ng-app="ticket"  ng-controller="listCtrl as vm" class="ticket_controller">
           <gather tickets="vm.tickets">
             <list populated="pullTicketsCntAs.tickets"></list>
            </gather>
        </div>