Jak zatrzymać kątowa przeładować gdy adres zmienia

Question

Używam kątowa na scrollTo i anchorScroll tak:

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> 

Moim problemem jest to, że po kliknięciu w link przewija stronę w dół, ale w 50% przypadków strona przeładowuje się, ponieważ zmiany hash w adresie URL.

Jak mogę zapobiec przeładowaniu strony przez Angular?

Aktualizacja: I odkryli, że tutaj

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

że

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

może ktoś powiedzieć jak obserwować to wydarzenie i zapobiec Wartość domyślna

Answer 1

To zdarzenie jest emitowana na rootScope, dzięki czemu można zarejestrować obserwatora za pomocą $on metoda.

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

Answer 2

Możesz dodać $ parametr zdarzeń na ng-click obsługi:

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

i funkcji scrollTo można zrobić następny:

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

    /** SOME OTHER LOGIC */ 
} 

Ale to oznacza, że ​​powinniśmy Przetwórz docelowy skrót kontrolny z elementu "a" ręcznie.

Answer 3

odświeżania się dzieje, ponieważ nie jest to wezwanie do wypadku locationChangeStart. Można temu zapobiec, wykonując:

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

I rzeczywiście skończyło się pisać własne dyrektywę scrollTo który używa tego połączenia wewnątrz niego.

Plnkr/Github

My other post about this here

Answer 4

Aby nie dopuścić do przeładunku w kątowym kotwicy dodać pusty atrybut 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

Answer 5

myślę, że może to pomóc u

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

od: https://stackoverflow.com/a/25930875/4138368