CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsanchor
TomSelleck
TomSelleck

Reputation: 6968

ng-repeat causes anchor positions to be incorrect

I have some href's in my navbar which point to different subsections on a page.

The problem is that if a user clicks the href, the browser points to a wrong position on the page (presumably the location before the ng-repeat has been rendered.)

Here is part of my navbar:

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

And my Classes page:

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

Any help would be appreciated.

Upvotes: 0

Views: 142

Answers (1)

sebastienbarbier
sebastienbarbier

Reputation: 6832

I don't think you are having issue with ng-repeat but with angular routing system.

Angular routing break default anchor since it use hash to display your path.

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

There is two times hash in your link and I assume your browser just consider the all string as an anchor (or angular route just catch it and prevent anchor effect).

To reproduce the anchor effect, you need to use $location.hash and $anchorScroll

In your app define :

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();  
  });
});

Then you can use links like

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

Upvotes: 1

Related Questions