3

I would like to bind an eventhandler to my ons-carousel postchange event in my AngularJS controller, however I keep getting an Uncaught TypeError: Cannot read property 'on' of undefined.

I try to access my carousel through its var attribute from my controller:

$scope.myCarousel.on('postchange', function() {
  // do something
});

and my carousel is declared in my view:

<ons-carousel var="myCarousel" swipeable overscrollable auto-scroll>
...
</ons-carousel>

It works, however i can't access the variable myCarousel and can't bind the event to it. What am I doing wrong?

Boldizsar
  • 683
  • 2
  • 8
  • 17

2 Answers2

4

I searched a bit the documentation of ons-carousel and I could overcome this issue by adding ons-postchange="changeCurrentPictureIndex()" attribute to my carousel in the view and somehow inside my changeCurrentPictureIndex method I was able to access the myCarousel variable.

Boldizsar
  • 683
  • 2
  • 8
  • 17
  • What do you mean by "... and somehow ..." ? – Michał Komorowski Nov 19 '15 at 08:51
  • I was not able to access myCarousel from the controller of the view, however I could access it from the function i bend to the attribute of the ons-carousel. By "... and somehow..." i mean that I don't know the explanation to this. – Boldizsar Nov 20 '15 at 10:31
0

Use ons.ready function before accessing Carousel variable. Because you can only access variable in controller once onsen initialization is done.

ons.ready(function() {
    myCarousel.on('postchange', function(event) {
        //your code
    });
});
Zain
  • 1
  • 2