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?

There's a couple of answers here that might help: http://stackoverflow.com/questions/16753003/angularjs-initialize-zurb-foundation-js — Youdaman, Oct 19 '13 at 21:08

score 9 · Answer 1 · answered Jan 26 '14 at 12:10

9

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/.

answered Jan 26 '14 at 12:10

sorich87

871
10
8

@sorich87 Does anyone knows about Orbit? foundation.zurb.com/docs/components/orbit.html – Labanino Oct 05 '15 at 02:06

score 8 · Accepted Answer · answered Aug 07 '13 at 18:12

8

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.

answered Aug 07 '13 at 18:12

Dan Kanze

18,485
28
81
134

@StephanMuller Thanks, exactly what I was looking for while Foundation for Apps is being pulled together (http://zurb.com/article/1312/the-next-foundation) – markfknight Sep 22 '14 at 06:24

score 1 · Answer 3 · edited May 23 '17 at 11:54

1

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!

edited May 23 '17 at 11:54

Community

1
1

answered May 10 '14 at 02:47

Alejandro Nanez

335
2
6
16

Foundation and AngularJS

3 Answers3

Linked