Question

我的导航栏中有一些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>

任何帮助都将不胜感激。

Answer 1

我认为您没有使用ng-repeat的问题，但使用角度路由系统。

Angular routing break默认锚，因为它使用hash来显示你的路径。

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

ng-repeat导致锚位置不正确

1 个答案: