Angular (1.5) JS Access Variable from Parent Component in Child Component?

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>

@WilliamHampshire searched this problem and found this code block before, I made sure my format was the same was the example, but for some reason my 2nd component is still not working. Code Here — wontonman2
First problem with your app is design, you should think first why you are creating those components and what means smart and dumb components and how to use them. Also, transclusion is usually a dumb component thing, it works very well for dumb components but for smart components you usually don't have reasons to use transclusion. — lenilsondc
However, the problem with calling the parent from the child, you basically call the parent from his alias in controllerAs: 'parent'. You just have to make sure the name it has in that scope. — lenilsondc
@LenilsondeCastro Can you elaborate on this, I did call the parent's controllerAs alias, I can see the data, but I cannot access it. Why is this? (See edited post) — wontonman2

ManishSingh ManishSingh · Accepted Answer · 2017-09-18T21:02:42

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

You can access the parent controller using

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

Angular (1.5) JS Access Variable from Parent Component in Child Component?

1 Answers