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

12 浏览
0 Comments

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

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

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});
Foo
Here you are

\n我的问题是，当我点击链接时，页面会滚动，但在50%的情况下，页面会重新加载，因为URL中的哈希值发生了变化。\n我该如何阻止Angular重新加载页面？\n更新：\n我在这里找到了答案\nhttps://groups.google.com/forum/?fromgroups=#!msg/angular/BY2ekZLbnIM/MORF-z2vHnIJ\n中提到：\n$location服务广播$locationChangeStart事件。您可以观察该事件，并调用event.preventDefault()来阻止导航。很好！\n有人能告诉我如何观察该事件并阻止默认行为吗？

0

3 答案

0 Comments

问题出现的原因：

当地址改变时，Angular会重新加载页面，导致页面内容的重新渲染和数据的重新获取，这可能会影响用户体验和性能。

解决方法：

使用以下代码可以停止Angular在地址改变时重新加载页面：

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

以上代码通过使用Angular的$location和$anchorScroll服务来实现。这段代码的作用是在地址改变时，将当前的地址哈希保存起来，然后将地址哈希设置为要跳转到的目标位置，使用$anchorScroll服务实现页面滚动到目标位置，最后将地址哈希还原为之前保存的值。

参考链接：https://stackoverflow.com/a/25930875/4138368

0
0 Comments

当Angular的地址改变时，页面会重新加载，这可能是由于点击链接时未阻止默认行为导致的。通过在ng-click处理程序上添加$event参数，并在scrollTo函数中阻止默认行为和停止事件冒泡，可以解决这个问题。但这意味着你需要手动解析目标锚点哈希值。

解决方法示例代码如下：

Foo
scope.scrollTo = function(str, event) {
    event.preventDefault();
    event.stopPropagation();
    /** SOME OTHER LOGIC */
}

以上是解决Angular地址改变时重新加载页面的方法。

0
0 Comments

当地址发生变化时，Angular会重新加载页面，这是因为调用了locationChangeStart事件。可以通过以下方式阻止这个重新加载：

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

我实际上编写了自己的scrollTo指令，其中使用了上述调用。

你可以在以下链接找到我编写的示例代码和更多关于此的问题：

[Plnkr](http://plnkr.co/edit/Sl2V4u3tVzsqEj7ttgNi?p=preview)

[Github](https://github.com/khalilravanna/scrollTo)

[这里是我关于这个问题的其他帖子](https://stackoverflow.com/questions/14712223/17928780#17928780)

0