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

【问题标题】：How to stop Angular to reload when address changes地址更改时如何阻止Angular重新加载
【发布时间】：2013-03-06 13:02:28
【问题描述】：

我正在像这样使用 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

那个

The $location service broadcasts a $locationChangeStart event. You can observe that and call event.preventDefault() to stop the navigation. Nice!

任何人都可以告诉如何观察该事件并防止默认

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

我觉得这对你有帮助

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

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

【讨论】：

【解决方案2】：

要防止页面在角锚中重新加载，请添加一个空的 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

【讨论】：

【解决方案3】：

刷新是因为调用了 locationChangeStart 事件。你可以通过这样做来阻止它：

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

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

Plnkr/Github

My other post about this here

【讨论】：

【解决方案4】：

您可以将 $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”元素解析目标锚散列。

【讨论】：

【解决方案5】：

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

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

【讨论】：

我已经把它放在 scrollTo 函数中并且它可以工作，但问题是我在左侧菜单上的其他点击停止工作，因为这也在改变哈希值。我如何才能仅在单击特定链接时防止这种情况发生
我不确定你是否可以。您可能还必须使用$anchorScroll() 管理这些链接，或者重新考虑您的设计。顺便说一句，那个 sn-p 进入你的控制器函数而不是你的 scrollTo 函数。