AngularJS component bindings not passing object

Question

Receiving error cannot read property 'type' of undefined at PollListCtrl.runQuery. I'm not sure why this is coming up undefined. I've console logged profile-polls.controller.js where listConfig is created to make sure there is an object here. The response is

{type: "all", filters: {pollsCreated: Array(3)}}

But it is coming up undefined when I try to pass it to poll-list component in the profile-polls.html. Below is the gist for the relevant files. Can anyone tell me why this is not passing correctly?

https://gist.github.com/RawleJuglal/fa668a60e88b6f7a95b456858cf20597

If you put a breakpoint on line 57, is queryConfig undefined? — Kyle
– Kyle, Commented Aug 22, 2017 at 17:59
My debug skills aren't strong so I'm not sure how to breakpoint looking at it in chrome, but I did a console log of queryConfig before this._Polls.query but it does not get that far. I assume because it is throwing the error at line 41. — Rawle Juglal
– Rawle Juglal, Commented Aug 22, 2017 at 18:16

Maxim Shoustin · Accepted Answer · 2017-08-22 20:12:32Z

1

I think you need to define watcher for your component. On start listConfig is undefined and only after some delay (next digest cycle) it gets value. So we create watcher and cancel it after if statement.

app.component('pollList', {
  bindings: {
    listConfig: '='
  },
  templateUrl: 'poll-list.html',
  controllerAs: 'vm',
  controller: PollListCtrl
});

function PollListCtrl($scope) {

    var vm = this;

    function run(){
      console.log(vm.listConfig);
    }


    var cancelWatch = $scope.$watch(function () {
        return vm.listConfig;
    },
    function (newVal, oldVal) {

        if (newVal !== undefined){
            run();
            cancelWatch();
        }
    });
}

Demo plunkr

edited Aug 22, 2017 at 20:12

answered Aug 22, 2017 at 17:51

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rawle Juglal Over a year ago

Sorry tried this but no change. It was also my understanding that controllerAs in the config would do the same thing. Is that not the case?

Ravi Kumar · Accepted Answer · 2017-08-22 18:40:56Z

0

You should never use $scope in your angularjs application.
You can use ngOnInit() life cycle hook to access "bindings" value instead constructor.

ngOnInit(){

$ctrl.listConfig = { type: 'all' };

$ctrl.limit = 5;

}

answered Aug 22, 2017 at 18:40

Ravi Kumar

681 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJS component bindings not passing object

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related