Come fermare angolare per ricaricare quando l'indirizzo cambia

Question

Sto usando del scrollTo e anchorScroll come questo angolare:

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> 

Il mio problema è che quando clicco sul collegamento la pagina scorre verso il basso, ma nel 50% dei casi le la pagina si ricarica perché l'hash cambia nell'URL.

Come si impedisce a Angular di ricaricare la pagina?

Update: Ho scoperto che qui

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

che

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

qualcuno può dire come osservare quell'evento ed evitare di default

Answer 1

Questo evento viene emesso sul rootScope, così puoi registrare un osservatore usando 01 Metodo.

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

Answer 2

È possibile aggiungere $ parametro dell'evento sul gestore ng-clic:

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

e nella funzione scrollTo si può fare la prossima:

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

    /** SOME OTHER LOGIC */ 
} 

Ma questo significa che si dovrebbe analizzare un hash dell'ancora di destinazione da un elemento "a" manualmente.

Answer 3

L'aggiornamento sta accadendo perché c'è una chiamata all'evento locationChangeStart. Ci si può fermare questo facendo:

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

realtà ho finito per scrivere la mia direttiva scrollTo che utilizza questa chiamata all'interno di esso.

Plnkr/Github

My other post about this here

Answer 4

Per evitare che la pagina da ricaricare in un ancoraggio angolare, aggiungere un attributo href vuoto.

<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

Penso che questo possa aiutare u

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

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