Foundation and AngularJS

Question

I am modifying an application using Zurb's Foundation framework for responsiveness and AngularJS. There is a bug where data displayed in a table with <tr ng-repeat="obj in entries">...</tr> has <td>'s which are hidden/shown based on Foundation's responsive rules. Unfortunately, when the angular model is updated, Foundation doesn't re-flow the newly rendered DOM.

I have tried using $(document).foundation('table') as I found in extensive google searching, but this didn't actually trigger a reflow of the responsive collapsed table. I also added a directive to trigger a simple $(window).trigger('resize') which works for the first call, but any subsequent calls do not.

Anybody else run into this?

Answer 1

Angular UI Bootstrap was not completely framework agnostic so we had to do some modifications to adapt it to Foundation. You can see the result and code here: http://madmimi.github.io/angular-foundation/.

Answer 2

You are mixing two technologies that dont play nice together.

The JS assets provided by Zurb Foundation will inevitably have conflicts with the digest cycle in AngularJS. For this reason --- Angular-Bootstrap projects emerged to transform jquery plugins into AngularJS directives.

http://angular-ui.github.io/bootstrap/

I don't believe the same level of support, "if any", is offered for Zurb Foundation.

Answer 3

You are not forced to use Bootstrap with Angular all the times.

You can use this project here http://madmimi.github.io/angular-foundation/ which tries to do the same as UI BOOTSTRAP.

Also you can reference this thread Using Zurb Foundation Interchange with AngularJS

Hope this helps!