javascript 如何在地址更改时停止 Angular 重新加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15472655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stop Angular to reload when address changes
提问by user1865341
I am using Angular's scrollToand anchorScrolllike this:
我正在使用 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>
My problem is that when i click the link the page scrolls down, but in 50% of cases the page reloads because the hash changes in the URL.
我的问题是，当我单击链接时，页面会向下滚动，但在 50% 的情况下，页面会重新加载，因为 URL 中的哈希值发生了变化。
How can I prevent Angular from reloading the page?
如何防止 Angular 重新加载页面？
Update: I have found that here
更新：我发现这里
https://groups.google.com/forum/?fromgroups=#!msg/angular/BY2ekZLbnIM/MORF-z2vHnIJ
https://groups.google.com/forum/?fromgroups=#!msg/angular/BY2ekZLbnIM/MORF-z2vHnIJ
that
那
The $location service broadcasts a $locationChangeStart event. You can observe that and call event.preventDefault() to stop the navigation. Nice!
The $location service broadcasts a $locationChangeStart event. You can observe that and call event.preventDefault() to stop the navigation. Nice!
can anyone tell how to observe that event and prevent default
谁能告诉我如何观察该事件并防止违约
回答by KhalilRavanna
The refresh is happening because there is a call to the locationChangeStart event. You can stop this by doing:
发生刷新是因为调用了 locationChangeStart 事件。您可以通过执行以下操作来停止此操作：
scope.$on('$locationChangeStart', function(ev) {
ev.preventDefault();
});
I actually ended up writing my own scrollTo directive that uses this call inside of it.
实际上，我最终编写了自己的 scrollTo 指令，该指令在其中使用了此调用。
回答by oaleynik
You can add $event parameter onto ng-click handler:
您可以将 $event 参数添加到 ng-click 处理程序中：
<a ng-click="scrollTo('foo', $event)">Foo</a>
and in scrollTo function you can do the next:
在 scrollTo 功能中，您可以执行以下操作：
scope.scrollTo = function(str, event) {
event.preventDefault();
event.stopPropagation();
/** SOME OTHER LOGIC */
}
But that means that you should parse a target anchor hash from an "a" element manually.
但这意味着您应该手动从“a”元素解析目标锚点哈希。
回答by Choldrim
I think this may help u
我认为这可能会帮助你
$scope.redirectTodiv = function(divname,event) {
var id = $location.hash();
$location.hash(divname);
$anchorScroll();
$location.hash(id);
};
回答by cezar
That event is emitted on the rootScope, so you can register an observer using the $onmethod.
该事件在 rootScope 上发出，因此您可以使用该$on方法注册观察者。
$scope.$on('$locationChangeStart', function(ev) {
ev.preventDefault();
});
回答by boismaxi
To prevent the page from reloading in an angular anchor, add an empty href attribute.
要防止页面在角度锚点中重新加载，请添加一个空的 href 属性。
<a href ng-click="scrollTo('foo')">Foo</a> OR <a href="" ng-click="scrollTo('foo')">Foo</a>
