Menu icon Foundation
Abide behaves completely different with angularjs and views

Hi there,
I have a strange problem with foundation 5.0.2, abide and angularjs with views. When using foundation, abide and angularjs with views the validation error messages are completely ignored (see first screenshot or the live website: http://bab-unstable.testsystem.pw:81/#/). What it displays is "Please fill out this field" in a tooltip like manner.

I created the same version of the website but without angularjs views; I just hardcoded the frontpage and it works as expected (see second screenshot or the live website: http://bab-unstable.testsystem.pw:81/index_without_views.html).

Any idea? I'm clueless.

Thanks in advance,
Andreas.

Screen shot 2013 12 30 at 21.23.48

Screen shot 2013 12 30 at 21.24.05

abidevalidationangular.js

Hi there,
I have a strange problem with foundation 5.0.2, abide and angularjs with views. When using foundation, abide and angularjs with views the validation error messages are completely ignored (see first screenshot or the live website: http://bab-unstable.testsystem.pw:81/#/). What it displays is "Please fill out this field" in a tooltip like manner.

I created the same version of the website but without angularjs views; I just hardcoded the frontpage and it works as expected (see second screenshot or the live website: http://bab-unstable.testsystem.pw:81/index_without_views.html).

Any idea? I'm clueless.

Thanks in advance,
Andreas.

Screen shot 2013 12 30 at 21.23.48

Screen shot 2013 12 30 at 21.24.05
Jay Hoots over 5 years ago

Try this

 $( document ).ready(function() {
  $(document).foundation();
});

Angular is loading the page dynamically so calling foundation after the page
has loaded should do the trick.

Alexander Bodal almost 5 years ago

Easiest way to get this stuff working properly is to include

 'angular-foundation': '*',

in your bower.json.
Then add

'mm.foundation',

as a dependency for your angular app.

you can check out my implementation of this at https://github.com/jzgdev/resume or http://alexander-bodal.herokuapp.com/
and get more info on 'angular-foundation' at http://madmimi.github.io/angular-foundation/