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?
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.
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/.
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!
来源：https://stackoverflow.com/questions/18107201/foundation-and-angularjs