0

I'm using Zurb Foundation 5.5.3 in an Angular JS project, and trying to execute a reveal modal. I look for this problem on community, but no solution has been successful, as I don't forget data-reveal property or I don't want to invoke JS via.

This is my code:

<div class="small-1 columns">
    <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
</div>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

It's the same as code example in Foundation docs. When I click on link, modal does not appear, and page is redirect to home.

Any idea?

Thanks in advance!

Community
  • 1
  • 1
Abel
  • 355
  • 9
  • 20

1 Answers1

-1

You reference a similar question here: Foundation and AngularJS

There are conflicts in the JavaScript digest cycle when using Foundation 5 and AngularJS, so they won't work together by default.

I've used two different solutions successfully:

I prefer using the latter.

Community
  • 1
  • 1
asonnenshine
  • 235
  • 1
  • 6