来自子组件中父组件的Angular（1.5）JS访问变量？

Question

I am attempting to abstract a concept of a ticket list building into an angular app using 2 components.

1st component --> ("Smart Component") Uses $http in order to pull the data and put it inside an array called populatedList that is in the parent ("gather") components controller. This part works.

2nd component --> ("Dumb component") For each key value pair in the populatedList var from the parent component it should create a list item. However the onInit() function for the second component is never called even though I registered it to the same module. The HTML template code as does not instantiate when I view it through the browser. I am not getting any errors on my console so what am I doing wrong? Why is my second component not working, even though I used "require" to get info from the parent component.

I finally got my child component to see the data from the populated "tickets" variable of the pullTicketCtn controller (evinced by screen shots) but when I try to console.log(vm.parentComp.tickets) or console.log(vm.tickets) it gives me an empty array even though I just did console.log(vm.parentComp) and console.log(vm) and SAW through the console the values in the array.

---

So now console.log(vm.parentComp.tickets) and console.log(vm) both show my displayTicketsCnt and pullTicketsCnt controllers to both have the tickets var, yet I cannot access it in the child or console.log() it. What Am I doing wrong?

pullticketCtn has the data/array

displayticketCtn has the data/array

3rd pic shows those 2 empty arrays [] and [] for console.log(vm.parentComp) and console.log(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>  

Answer 1

transclude : true, should be part of gather not list.

You can access the parent controller using

require: { parent: '^^gather' },