AngularJS and working with js/css libraries that use hash URLs

Question

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.

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 00: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

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Inspired by this SO post, I solve this issue use the below code:

In template, add ng-click directive in open&close button.

<a class="icon icon-more" ng-click="toggleModal()"></a>

And in controller:

$scope.toggleModal = function() {
  jQuery('#myModalexample').toggleClass('active');
};

It works fine for me.

Update

About this question, a PR Specify modal selector in data attribute has been proposed to use data-modal rather than href to open/close ratchet modal.

AngularJS and working with js/css libraries that use hash URLs

1 Answers1

Update