AngularJS - nested component callback not making it past a component factory

Question

I am writing an app with Ionic 1.3.5 and AngularJS 1.5.3.

I have nested components and a component factory that decides which child component to render.

One child type has an onClick call back that I am trying to propagate to the parent. I keep getting this error: Cannot use 'in' operator to search for '$ctrl' in Today

Here is my factory:

<clickable-list
    ng-if="$ctrl.type === 'clickableList'"
    on-click="$ctrl.onClick(value)"
    answer="$ctrl.answer">
</clickable-list>

<plain-text-answer
    ng-if="$ctrl.type === 'plainText'"
    answer="$ctrl.answer">
</plain-text-answer>

I was able to fix my Plunker so it runs and reproduces the error: http://plnkr.co/edit/ESTMPRRpdRuks6AJdRxv

Petr Averyanov · Accepted Answer · 2018-04-17 11:28:42Z

1

First, your plunker does not work cause you must have spaces:

template: ['<component', 'value="1">', '</component>']

result in html <componentvalue="1"></component>

Second, your problem is how you chain calls passing value. To make it work without additional methods you need:

one component

<c1 ng-click="$ctrl.onClick({value: value})">

two components

<c1 on-click="$ctrl.onClick({value: value})">
<c2 ng-click="$ctrl.onClick({value: {value: value}})">

...

Since this is a bit retarded, it is better to create intermidiate methods:

c1: (onClick: '&')
vm.doClick = (value) => {
  vm.onClick({value: value});
}

then you have fancy html for c1: <c2 ng-click="$ctrl.doClick({value: value})">

http://plnkr.co/edit/27cCqsnACtdIz00PfI3E?p=preview correct plunk

answered Apr 17, 2018 at 11:28

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

1 Comment

user1261710 Over a year ago

This worked but in my real code base I need to go up a few more levels... I don't understand why it's necessary to wrap it several times or use intermediate methods.

Collectives™ on Stack Overflow

AngularJS - nested component callback not making it past a component factory

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related