如何阻止Angular在地址更改时重新加载

Question

我正在使用Angular的scrollTo和anchorScroll，代码如下：

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>

我的问题是，当我点击链接时，页面会向下滚动，但在50%的情况下，页面会重新加载，因为URL中的哈希值发生了变化。如何防止Angular重新加载页面？

更新： 我已经找到了解决方法。

https://groups.google.com/forum/?fromgroups=#!msg/angular/BY2ekZLbnIM/MORF-z2vHnIJ

“that”在这里指的是$location service广播的$locationChangeStart事件。您可以观察该事件并调用event.preventDefault()来停止导航。有人能告诉我如何观察该事件并阻止默认行为吗？

- user1865341

Answer 1

刷新是因为调用了locationChangeStart事件。您可以通过执行以下操作来停止此操作：

scope.$on('$locationChangeStart', function(ev) {
    ev.preventDefault();
});

我最终编写了自己的scrollTo指令，其中使用了这个调用。

Plnkr / Github

这里是我关于此问题的另一篇文章。

- KhalilRavanna

Answer 2

您可以将 $event 参数添加到 ng-click 处理程序中：

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

在 scrollTo 函数中，您可以执行以下操作：

scope.scrollTo = function(str, event) {
    event.preventDefault();
    event.stopPropagation();

    /** SOME OTHER LOGIC */
}

但这意味着您需要手动解析“a”元素中的目标锚点哈希。

- oaleynik

Answer 3

我想这可能会对您有所帮助。

$scope.redirectTodiv = function(divname,event) {
    var id = $location.hash();
    $location.hash(divname);
    $anchorScroll();
    $location.hash(id);
};

来源：https://dev59.com/BoPba4cB1Zd3GeqPtotn#25930875

- Choldrim

Answer 4

该事件在rootScope上触发，因此您可以使用$on方法注册观察者。

$scope.$on('$locationChangeStart', function(ev) {
  ev.preventDefault();
});

- cezar

---

我已经将它放在了scrollTo函数中，它可以工作，但问题是我的左侧菜单上的其他点击也停止工作了，因为它也在更改哈希。我该如何只在特定链接上点击时才防止这种情况发生？ - user1865341

我不确定你是否能够做到。你可能也需要使用 $anchorScroll() 来管理这些链接，或者重新考虑你的设计。顺便说一下，这段代码片段应该放在你的控制器函数中，而不是你的 scrollTo 函数中。 - cezar

Answer 5

为了防止在Angular锚点中重新加载页面，请添加一个空的href属性。

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

文档：https://docs.angularjs.org/api/ng/directive/ngHref

- boismaxi