angular.js＆foundation 5手風琴

Question

我目前正在做一個AngularJS應用程序。這對我來說是一種全新的方式，但我使用它越多，我越喜歡它！ Angular是一個非常酷的框架！

因此，對於我的第一個應用程序，我嘗試使用Foundation 5來構建前端模塊和後端模塊。我正在使用基金會的手風琴來包裝他們的內容。

<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路線，手風琴嘗試添加諸如「＃panel1」，「＃panel2」之類的url參數......當我點擊它時......角度並不完全符合這一點。 ..因爲我的路線說：

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

所以角應力重定向到根和我的手風琴沒有被觸發了......

任何想法如何解決呢？ 謝謝，希望我的英語不好會讓你們明白我的問題！

Answer 1

在我看來，你有兩個選擇：

1. 使用Angular Foundation。
2. Remove the #來自網址，也被稱爲HTML5模式。另外，initialize Foundation。

我已經使用Angular Foundation的accordeons取得了巨大的成功，所以我可以推薦它。