javascript - Angular.js 和 Foundation 5 Accordion

Question

我目前正在开发一个 AngularJS 应用程序。这对我来说是一种全新的方法，但我用得越多，我就越喜欢它! Angular 是一个非常酷的框架!

因此，对于我的第一个应用程序，我尝试使用 Foundation 5 来构建前端模块和后端模块。我正在使用基金会的 Accordion 将内容包装在两者中。

<dl class="accordion" data-accordion="">
    <dd class="accordion-navigation">
        <a class="active" href="#panel1">Foot-Hand-Volley <i class="foundicon-minus right"></i></a>
        <div id="panel1" class="content active">
            <div class="row">
                <div class="large-6 columns">
                    <ul class="no-bullet">
                        <li>15 designs</li>
                        <li>2 produits</li>
                        <li>2 matières</li>
                    </ul>
                </div>
                <div class="large-6 columns">
                    <ul class="no-bullet">
                        <li>4 formes</li>
                        <li>4 numéros et nom</li>
                        <li>12 logos et sponsors</li>
                    </ul>
                </div>
            </div>
            <a href="#" class="button">Supprimer le sport</a>
            <a href="#" class="button">Editer le sport</a>
        </div>
    </dd>

    <dd class="accordion-navigation">
        <a href="#panel2">Rugby <i class="foundicon-plus right"></i></a>

        <div id="panel2" class="content">

            <div class="row">
                <div class="large-6 columns">
                    <ul class="no-bullet">
                        <li>15 Designs</li>
                        <li>2 produits</li>
                        <li>2 matières</li>
                    </ul>
                </div>
                <div class="large-6 columns">
                    <ul class="no-bullet">
                        <li>4 formes</li>
                        <li>4 numéros et nom</li>
                        <li>12 logos et sponsors</li>
                    </ul>
                </div>
            </div>

            <a href="#" class="button">Supprimer le sport</a>
            <a href="#" class="button">Editer le sport</a>

        </div>
    </dd>

    <dd class="accordion-navigation">
        <a href="#panel3">Basket <i class="foundicon-plus right"></i></a>

        <div id="panel3" class="content">

            <div class="row">
                <div class="large-6 columns">
                    <ul class="no-bullet">
                        <li>15 Designs</li>
                        <li>2 produits</li>
                        <li>2 matières</li>
                    </ul>
                </div>
                <div class="large-6 columns">
                    <ul class="no-bullet">
                        <li>4 formes</li>
                        <li>4 numéros et nom</li>
                        <li>12 logos et sponsors</li>
                    </ul>
                </div>
            </div>

            <a href="#" class="button">Supprimer le sport</a>
            <a href="#" class="button">Editer le sport</a>

        </div>
    </dd>
    <dd></dd>

</dl>

在前端应用程序上它运行完美!真的没问题。

在后端，我需要使用路由。在正确的时间我使用 Angular 路由，我的 Accordion 试图添加 url 参数，例如“#panel1”、“#panel2”...当我单击它时...而 Angular 并不真正同意这一点。 ..因为我的路线说:

app.config(function($routeProvider) {
    $routeProvider.
            when('/', {
                templateUrl: 'views/home.html',
                controller: 'homeCtrl'}).
            when('/login', {
                templateUrl: 'views/login.html',
                controller: 'loginCtrl'}).
            otherwise({
                redirectTo: '/'
            });
});

所以 Angular 强制重定向到根目录，并且我的 Accordion 不再被触发...

知道如何解决吗？ 谢谢并希望我糟糕的英语能让你们理解我的问题!

Answer 1

在我看来，你有两个选择:

1. 使用Angular Foundation .
2. Remove the #来自 URL，也称为 HTML5 模式。另外，initialize Foundation .

我使用 Angular Foundation 的折叠式折叠器并取得了巨大成功，因此我可以推荐它。