Zurb Foundation Off Canvas sub-menu not working with Angular

Question

I have the following copied from Foundation to get an Off Canvas sub-menu working:

<li class="has-submenu">
   <a href="#">Foo</a>
   <ul class="left-submenu">
      <li class="back"><a href="#">Back</a></li>
      <li><label>Level 1</label></li>
      <li><a href="#">Link 1</a></li>
   </ul>
</li>

When I click on 'Foo', the submenu does not come up, I go to my home page. I believe because the link is #, and that's what Angular uses. Is there a way to change Foundation's use of # in this case to get the submenu to work?

Answer 1

I believe because the link is #, and that's what Angular uses.

Yes, you are right. The first possibility to solve this is to turn on html5mode but it is not always possible (e.g. because of setup of your server).

Another solution is to keep href blank - if you don't need hash tags for anchors but only to open the sub-menu, the functionality is much the same:

<li class="has-submenu">
   <a href="">Foo</a>
   <ul class="left-submenu">
      <li class="back"><a href="">Back</a></li>
      <li><label>Level 1</label></li>
      <li><a href="">Link 1</a></li>
   </ul>
</li>