collection-repeat with angular component, what is

Question

I'm trying to use collection-repeat to display an angular component for each object in an array. I pass each object as parameter to an angular component but when I try to access the object in my component's controller I get undefined.

<ion-content>
   <ion-list>
     <ion-item
    collection-repeat="user in users"
    item-width="100%"
    item-height="90px">
        {{user}} //renders my user data correctly instantly
    <usser user="user"></user>
    </ion-item>
  </ion-list>
</ion-content>

My component

angular
    .module('app')
    .component('user', {
        templateUrl: 'components/user.html',
        scope: true,
        bindings: {
            user: '<'
        },
        controller: function() {
        console.log(self.user)  //prints undefined
        }
    })

• I've tried wrapping the console.log in a $timeout without success
• Printing self displays {user: undefined} in my chrome console, but if I expand the object I can see that user contains the correct data (only for the some of the items)
• Accessing self.user doesn't work

EDIT: I can't really understand what's going on..

controller: function() {
    console.log(self.user)  //prints undefined
    setTimeout(function() {
        console.log(self.user) // prints my data
    }, 2000)
}

What am I doing wrong?

Thanks in advance!

Answer 1

Lost 3 hours to figure out this

This is a known issue at the moment with collection repeat. A fix would require a refactor of collection repeat, which would be too big of a change the moment.

Always check the issues on Github, [V] lesson learned