0

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>
wontonman2
  • 25
  • 1
  • 7
  • You should try searching, this is a fairly common problem. – Kyle Krzeski Sep 18 '17 at 16:34
  • @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](https://plnkr.co/edit/C7VASc?p=preview) – wontonman2 Sep 18 '17 at 17:22
  • 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 Sep 18 '17 at 17:34
  • 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 Sep 18 '17 at 17:36
  • @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 Sep 19 '17 at 00:03
  • your approach to this is strange. `$http` is async, which means that it doesn't return results immediately. it doesn't make sense to use `.slice(0)` to try to create a new array from async data, since the `.slice` is *only called once*, when the component is initialized, and this will be before the data is actually returned from the server; the net result is that you will always be using `.slice` on an empty array. On top of that, the main benefit of component isolation is lost the moment you try to access data in another component, instead of just passing the data in `bindings`. – Claies Sep 19 '17 at 00:31
  • to make matters worse, your code tries to *supply a parameter to a binding that doesn't exist* as well. – Claies Sep 19 '17 at 00:32
  • Possible duplicate of [What's an elegant way of accessing parent controller's member from child controller?](https://stackoverflow.com/questions/39003673/whats-an-elegant-way-of-accessing-parent-controllers-member-from-child-control) – lenilsondc Sep 19 '17 at 11:20

1 Answers1

0

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

You can access the parent controller using

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

ManishSingh
  • 1,804
  • 1
  • 12
  • 11