ng-repeat приводит к неправильному положению якоря

Question

ng-repeat приводит к неправильному положению якоря

0

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

Проблема заключается в том, что если пользователь нажимает на href, браузер указывает на неправильную позицию на странице (предположительно, местоположение до отображения ng-repeat).

Вот часть моего навигатора:

<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>

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

TomSelleck 28 июнь 2015, в 17:31

Источник

Теги:

javascript

jquery

html

angularjs

anchor

1 ответ

Ещё вопросы

sebastienbarbier · Answer 1 · 2015-06-28T13-43-00.000Z

Я не думаю, что у вас проблема с 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>