By wontonman2


2017-09-18 16:07:55 8 Comments

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>  

1 comments

@ManishSingh 2017-09-18 21:02:42

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

You can access the parent controller using

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

@wontonman2 2017-09-19 00:04:13

Are you talking about using .$onChanges = function()... as opposed to onInit()? Why would I need to do that?

@ManishSingh 2017-09-19 01:24:10

Sorry, I read you question incorrectly, I just updated my answer. You can access the parent controller using require: { parent: '^^gather' },

@ManishSingh 2017-09-19 01:25:17

So you have to use the two ^^ instead of one ^

@ManishSingh 2017-09-19 12:54:22

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

Related Questions

Sponsored Content

18 Answered Questions

[SOLVED] How do I access the $scope variable in browser's console using AngularJS?

9 Answered Questions

[SOLVED] AngularJS access parent scope from child controller

4 Answered Questions

[SOLVED] how to re-render child component on state change(Parent) reactjs

3 Answered Questions

1 Answered Questions

3 Answered Questions

How to access component methods from parent controller in Angular1.5

2 Answered Questions

0 Answered Questions

Angular 1.5 clear child components from parent

0 Answered Questions

Angular 1.5 correct way to synchronize changes in a component

  • 2016-07-14 21:28:40
  • Luis M. Villa
  • 139 View
  • 0 Score
  • 0 Answer
  • Tags:   angularjs

Sponsored Content