如何在地址更改时阻止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

那

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

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

Answer 1

刷新正在发生，因为有一个对locationChangeStart事件的调用。 你可以这样做：

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

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

Plnkr / Github

我在这里的另一篇文章

Answer 2

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

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

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

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

    /** SOME OTHER LOGIC */
}

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

Answer 3

我想这可能会对你有所帮助

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

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

Answer 4

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

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

Answer 5

要防止页面在角度锚点中重新加载，请添加一个空的href属性。

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

doc： https ： //docs.angularjs.org/api/ng/directive/ngHref