6

我正在使用 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!

谁能告诉如何观察该事件并防止违约

4

5 回答 5

9

正在进行刷新是因为调用了 locationChangeStart 事件。您可以通过以下方式停止此操作：

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

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

Plnkr / Github

我关于这个的另一篇文章在这里

于 2013-07-29T16:09:53.363 回答
6

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

于 2013-04-02T10:31:10.183 回答
2

我想这可能对你有帮助

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

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

于 2016-07-27T03:32:29.280 回答
1

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

$scope.$on('$locationChangeStart', function(ev) {
  ev.preventDefault();
});
于 2013-03-18T11:32:56.683 回答
0

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

于 2014-10-30T19:40:14.277 回答