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