AngularJS and sidr library

Question

For sidr, it uses href="#targetDivToSidr" as a way to determine what div to perform the sidebar on. This has problems when being used with AngularJS since # is used for routing.

<a id="confirmedEventsToggler" href="#confirmedEvents">Confirmed Events</a>
<div id="confirmedEvents">
<h1>Confirmed events</h1>
<p>Foo Lorem Ipsum Dolor Foo bar aiodnwaindawo idno adnwaiodn aiodnwaiodn wiao dnwaio dnawiodnwiaodnawiod nwi    od nwaiodnwiao</p>
</div>

<script> 
     $(document).ready(function() {
        $('#confirmedEventsToggler').sidr();
     });
</script>

The above code doesn't work. The sidr on the left comes when I click on the link but the there is no content. How do I get AngularJS to let sidr use href="#..."? .

Answer 1

Instead of binding sidr toggler directly to the hyperlink, you can manually toggle it using $.sidr('toggle', 'confirmedEvents')

<a id="confirmedEventsToggler">Confirmed Events</a>
<div id="confirmedEvents">
<h1>Confirmed events</h1>
<p>Foo Lorem Ipsum Dolor Foo bar aiodnwaindawo idno adnwaiodn aiodnwaiodn wiao dnwaio dnawiodnwiaodnawiod nwi    od nwaiodnwiao</p>
</div>

<script> 
     $(document).ready(function() {
        $('#confirmedEventsToggler').click(function() {
            $.sidr('toggle', 'confirmedEvents');
        });
     });
</script>

Answer 2

It not uses the href. By default it looks for a id='sidr', but you can pass the id with the 'name' option:

<a id="confirmedEventsToggler" href="#">Confirmed Events</a>
<div id="confirmedEvents">
    <h1>Confirmed events</h1>
    <p>Foo Lorem Ipsum Dolor Foo bar aiodnwaindawo idno adnwaiodn aiodnwaiodn wiao dnwaio dnawiodnwiaodnawiod nwi    od nwaiodnwiao</p>
</div>

<script> 
    $(document).ready(function() {
        $('#confirmedEventsToggler').sidr({
            name: 'confirmedEvents'
        });
    });
</script>