AngularJS和sidr库

Question

对于sidr，它使用href="#targetDivToSidr"作为确定执行侧边栏的div的方法。与AngularJS一起使用时会出现问题，因为＃用于路由。

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

上述代码不起作用。当我点击链接但没有内容时左边的sidr出现了。如何让AngularJS让sidr使用href="#..."?。

Answer 1

您可以使用$.sidr('toggle', 'confirmedEvents')

手动切换它，而不是将sidr切换器直接绑定到超链接

<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

它不使用href。默认情况下，它会查找id ='sidr'，但您可以使用'name'选项传递id：

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