如何在AngularJS中处理锚式哈希链接

Question

你们中的任何人都知道如何在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.chapter匹配元素之后,然后使用jQuery向下滚动到它.

但是然后AngularJS又一次打击我,只是滚动到页面的顶部.

所以,这里的任何人都做过类似的事情并且知道一个很好的解决方案吗？

编辑:切换到html5Mode应该解决我的问题,但我们有点必须支持IE8 +所以我担心它不是一个公认的解决方案:/

Answer 1

你在找$anchorScroll().

这是(糟糕的)文档.

这是源头.

基本上你只是注入它并在你的控制器中调用它,它会滚动你到任何找到id的元素 $location.hash()

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

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

这是一个展示的掠夺者

编辑:使用此与路由

像往常一样设置角度路由,然后添加以下代码.

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

你的链接看起来像这样:

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

这是一个使用路由和$ anchorScroll演示滚动的Plunker

甚至更简单:

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>

Answer 2

在我的情况下,我注意到如果我修改了路由逻辑,它就会被激活$location.hash().以下技巧有效..

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

Answer 3

target="_self"创建链接时无需更改任何路由或其他任何需要使用的内容

例:

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

并使用html元素中的id属性,如下所示:

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

没有必要在评论中指出/提及## ;-)

Answer 4

<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="faq-3">Question 3</h3>

Answer 5

如果你总是知道路线,你可以简单地附加这样的锚点:

href="#/route#anchorID

route当前角度路线在哪里,并anchorID匹配<a id="anchorID">页面上的某个位置

Answer 6

这是我的解决方案使用一个似乎更Angular-y的指令,因为我们正在处理DOM:

Plnkr在这里

github上

码

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

HTML

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit??, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit??, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

我使用了$ anchorScroll服务.为了抵消随着哈希变化而进行的页面刷新,我继续前进并取消了locationChangeStart事件.这对我有用,因为我有一个连接到ng-switch的帮助页面,刷新将彻底破坏应用程序.

Answer 7

$anchorScroll 适用于此,但有更好的方法在更新的Angular版本中使用它.

现在,$anchorScroll接受哈希作为可选参数,因此您根本不需要更改$location.hash.(文件)

这是最好的解决方案,因为它根本不会影响路线.我无法使用任何其他解决方案,因为我正在使用ngRoute,并且路由会在我设置$location.hash(id)之后立即重新加载,然后$anchorScroll才能发挥其魔力.

以下是如何使用它...首先,在指令或控制器中:

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

然后在视图中:

<a href="" ng-click="scrollTo(id)">Text</a>

此外,如果您需要考虑固定的导航栏(或其他UI),您可以像这样设置$ anchorScroll的偏移量(在主模块的运行功能中):

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});

Answer 8

尝试为角度路由设置哈希前缀 $locationProvider.hashPrefix('!')

完整示例:

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

Answer 9

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

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

Answer 10

这是一篇很老的帖子,但我花了很长时间研究各种解决方案,所以我想分享一个更简单的解决方案.只需添加target="_self"到<a>标签固定对我来说.该链接有效,并将我带到页面上的正确位置.

但是,Angular仍会在URL中使用#注入一些奇怪的内容,因此在使用此方法后使用后退按钮进行导航可能会遇到麻烦.