如何处理锚哈希链接在AngularJS

有人知道如何在AngularJS中很好地处理锚散列链接吗?

对于一个简单的faq页面，我有以下标记

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

当点击上面的任何链接时，AngularJS会拦截并将我路由到一个完全不同的页面(在我的例子中，一个404页，因为没有路由匹配这些链接)。

我的第一个想法是创建一个匹配“/faq/:chapter”的路由，并在相应的控制器中检查$routeParams。然后使用jQuery向下滚动到它。

但是AngularJS又把我搞砸了，反正就是滚动到页面顶部。

有人在过去做过类似的事情并且知道一个好的解决方法吗?

编辑:切换到html5Mode应该解决我的问题，但我们有点必须支持IE8+无论如何，所以我担心这不是一个可接受的解决方案:/

当前回答

你可以尝试使用anchorScroll。

例子

所以控制器会是:

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

和视图:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

.．.锚的id也没有秘密:

<div id="foo">
  This is #foo
</div>

2013-10-24 01:55:34

其他回答

我可以这样做:

<li>
<a href="#/#about">About</a>
</li>

2015-12-03 19:07:35

这可能是ngView的一个新属性，但我已经能够使用ngView autoscroll属性和'double-hashes'让它锚定哈希链接与angular-route一起工作。

ngView(见autoscroll)

(以下代码用于角钢带)

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

2014-06-24 14:48:29

你可以尝试使用anchorScroll。

例子

所以控制器会是:

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

和视图:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

.．.锚的id也没有秘密:

<div id="foo">
  This is #foo
</div>

2013-10-24 01:55:34

在我的脑海中@ slugsllog已经有了，但我要改变一件事。我会用replace代替，这样你就不用回调了。

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

文档搜索“替换方法”

2015-02-04 19:51:00

我在我的应用程序的路由逻辑中解决了这个问题。

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}

2014-09-11 13:06:08

如何处理锚哈希链接在AngularJS

推荐文章

最新文章

标签