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取得了巨大的成功，所以我可以推荐它。