ng-repeat вызывает неправильные позиции привязки

Question

У меня есть некоторые href в моем навигаторе, которые указывают на разные подразделы на странице.

Проблема заключается в том, что если пользователь нажмет HREF, точки браузера в неправильное положение на странице

Вот часть моей навигационной панели (предположительно место до нг повтор был оказан.):

<ul class="nav navbar-nav"> 
     <!--Classes--> 
     <li class="dropdown"> 
     <a href="" class="dropdown-toggle mai-navbar-heading" data-toggle="dropdown" role="button" aria-expanded="false">Classes</a> 
     <ul class="dropdown-menu" role="menu"> 
      <li> 
      <a href="#/Classes#classtypes">Class Types</a> 
      </li> 
      <li> 
      <a href="#/Classes#timetable">Timetables</a> 
      </li> 
      <li> 
      <a href="#/Classes#classdescriptions">Class Descriptions</a> 
      </li> 
      <li> 
      <a href="#/Classes#instructors">Instructors</a> 
      </li> 
      <li> 
      <a href="#/Classes#testimonials">Testimonials</a> 
      </li> 
      </ul> 
     </li> 
    </ul> 

И моя страница Классы:

<h2 class="mai-header-red" id="faq">FAQ</h2> 
    <h4 class="mai-header-white mai-contact-desc">Some description stuff here 
    </h4> 
    <div class="container ng-cloak" ng-controller="faqController"> 
     <div class="panel-group" id="accordion"> 
     <div class="panel panel-default" ng-repeat="faq in questions"> 
      <div class="panel-heading"> 
       <div data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}"> 
        <h4 class="panel-title"> 
        {{$index + 1}}. {{faq.question}} 
        </h4> 
       </div> 
      </div> 
      <div id="collapse{{$index}}" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        <p>{{faq.answer}}</p> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <h2 class="mai-header-red" id="testimonials">Testimonials</h2> 

Любая помощь будет оценена.

Answer 1

Я не думаю, что у вас проблема с ng-repeat, но с угловой системой маршрутизации.

Угловая маршрутизация прерывания по умолчанию, поскольку она использует хеш для отображения вашего пути.

<a href="#/Classes#classtypes">Class Types</a> 

Существует два раза хэша в вашей ссылке, и я полагаю, ваш браузер просто рассматривать все строки в качестве якоря (или углового маршрута только поймать его и предотвратить якорный эффект).

Чтобы воспроизвести эффект якорь, вам нужно использовать $location.hash и $anchorScroll

В приложении определить:

app.run(function($rootScope, $location, $anchorScroll) { 
    //when the route is changed scroll to the proper element. 
    $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { 
    if($location.hash()) $anchorScroll(); 
    }); 
}); 

Затем вы можете использовать ссылки как

<a href="#/test#foo">Test/Foo</a>