current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm using AngularJS with html5 mode on, which is making it difficult for me to use libraries, Ratchet in particular, that are dependent on using hash URLs to show/hide information.

Here is an example of a Ratchet Modal:

<a href="#myModal" class="button">Open modal</a>

<div id="myModal" class="modal">
  <header class="bar-title">
    <h1 class="title">Modal</h1>
    <a class="button" href="#myModal">
      Close
    </a>
  </header>

  <div class="content content-padded">
    <p>The contents of my modal.</p>
  </div>
</div>

Clicking on "Open Modal" tries to add "#myModal" to the URL but that doesn't match a route in $routeProvider, so it redirects to root.

Any suggestions on how to deal with this? I know people have posted that they have used angular with ratchet here: does "ratchet" play nicely with "angular.js" yet? but I can't figure it out.

share|improve this question
    
Just off the top of my head, it would seem that the click event on the modal open button is not stopping the default click action. Note that in the Ratchet docs, clicking on the modal button does NOT add the #myModal hash to the URL. Out of curiosity, which js file is included first, Ratchet or Angular? –  Sean Ryan Sep 11 '13 at 0:15
    
yeah I believe Ratchet adds an active class to the modal div. I have Ratchet included first. I guess I could a function that adds the active class but the animation isn't the same. –  bsiddiqui Sep 11 '13 at 16:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.