1

I'm currently doing an AngularJS app. This is a brand new approach for me, but the more I use it, the more I love it ! Angular is a really cool framework !

So, for my first app, I tried to use Foundation 5 with it, to build a Frontend module and a Backend module. I'm using the Foundation's accordion to wrap contents in them both.

<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>
On the frontend app it works perfectly ! Really no problem.

On the backend, I need to use routes. And at the right time I use Angular routes, my accordion is trying to add url params such as "#panel1", "#panel2"... when I click on it... And angular doesn't really agree with that... because my routes says :

app.config(function($routeProvider) {
    $routeProvider.
            when('/', {
                templateUrl: 'views/home.html',
                controller: 'homeCtrl'}).
            when('/login', {
                templateUrl: 'views/login.html',
                controller: 'loginCtrl'}).
            otherwise({
                redirectTo: '/'
            });
});
so Angular forces the redirection to the root and my accordion is not being triggered anymore...

Any idea how to solve it ? Thanks and hope that my bad English will make you guys understand my problem !

Knut Holm
  • 3,988
  • 4
  • 32
  • 54

1 Answers1

0

In my opinion, you have two options:

  1. Use Angular Foundation.
  2. Remove the # from the URLs, also known as HTML5 mode. Also, initialize Foundation.

I have used Angular Foundation's accordeons with great success, so I can recommend it.

Community
  • 1
  • 1
Dormouse
  • 1,617
  • 1
  • 23
  • 33
  • Oh, and using Angular Foundation and the default Foundation elements (dd, dl) together, results in a broken app (extra dl's being inserted by Angular Foundation). – Dormouse Oct 28 '14 at 15:41