Comment arrêter Angular pour recharger lorsque l'adresse change

J'utilise Angular's scrollTo et anchorScroll comme ceci:

 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>

Mon problème est que lorsque je clique sur le lien, la page défile vers le bas, mais dans 50% des cas, la page est rechargée car le hash change dans l'URL.

Comment puis-je empêcher Angular de recharger la page?

Mise à jour: j'ai trouvé que ici

Https://groups.google.com/forum/?fromgroups=#!msg/angular/BY2ekZLbnIM/MORF-z2vHnIJ

cette

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

Quelqu'un peut-il dire comment observer cet événement et prévenir le défaut

Le rafraîchissement se produit car il y a un appel à l'événement locationChangeStart. Vous pouvez arrêter ceci en faisant:

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

J'ai fini par écrire ma propre directive scrollTo qui utilise cet appel à l'intérieur de celle-ci.

Plnkr / Github

Mon autre commentaire à propos de cela ici

Vous pouvez ajouter un paramètre $ event sur le gestionnaire ng-click:

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

Et dans la fonction scrollTo vous pouvez faire la suivante:

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

Mais cela signifie que vous devez analyser manuellement un tiret d'ancrage cible à partir d'un élément "a".

Je pense que cela peut vous aider

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

À partir de: https://stackoverflow.com/a/25930875/4138368

Cet événement est émis sur l'arborescence, de sorte que vous pouvez enregistrer un observateur en utilisant la méthode $on .

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

Pour empêcher la page de recharger dans une ancre angulaire, ajoutez un attribut href vide.

 <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