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

Question

我正在使用Angular的滚动键和主播滚动键，如下所示：

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

那个啊

$location服务广播$locationChangeStart事件。您可以观察并调用该事件。preventDefault（）停止导航。很好

有人能告诉我们如何观察这一事件并防止违约吗




Answer 1

我想这可能对你有帮助

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

来自：https://stackoverflow.com/a/25930875/4138368

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”元素中解析目标锚点哈希。

Answer 3

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

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

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

Plnkr/Github

这是我的另一篇文章