2

I am working on a project that uses AngularJS. For the CSS side of the ball, I'm relying on Zurb Foundation 5. For the most part, I have things working, with two exceptions: accordians and tabs.

Whenever I use these items, they initially render just fine. However, whenever I try to change tabs or panels, I get a JavaScript error. The error comes from foundation.min.js and says:

Uncaught TypeError: Cannot read property 'active_class' of undefined

How do I get this resolved so that I can use these two controls within the context of AngularJS?

Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111
user3192178
  • 263
  • 1
  • 2
  • 9

2 Answers2

0

I was having this issue on Rails 4 due to the newly implemented turbolinks. For anyone who has that issue, it can be solved with the method in the top answer here: Rails 4: how to use $(document).ready() with turbo-links.

My guess is that since the links are being loaded asynchronously, Foundation.js doesn't have a chance to attach the proper handlers to those elements.

Community
  • 1
  • 1
Zach
  • 1,233
  • 13
  • 19
0

My bet is that your accordion and tabs are being shown by conditional with an ng-if and they aren't being rendered in time for foundation to attach its handlers. I fixed my issue by changing ng-if to ng-show

kyler
  • 633
  • 5
  • 10