Existem tantas respostas para esta pergunta aqui, mas parece que há um pouco de confusão sobre o que realmente está acontecendo aqui.
Em primeiro lugar, sua premissa
"href substitui ng-click em Angular.js"
está errado. O que está realmente acontecendo é que, após o seu clique, o evento de clique é primeiro tratado pelo angular (definido pela ng-click
diretiva no angular 1.x e click
no angular 2.x +) e então continua a se propagar (o que eventualmente aciona o navegador para navegar até o url definido com href
atributo). (Veja isto para mais informações sobre propagação de eventos em javascript)
Se você quiser evitar isso, deverá cancelar a propagação do evento usando o método da interface The EventpreventDefault()
:
<a href="#" ng-click="$event.preventDefault();logout()" />
(Esta é pura funcionalidade de javascript e nada a ver com angular)
Agora, isso já resolverá seu problema, mas não é a solução ideal. Angular, com razão, promove o padrão MVC . Com esta solução, seu template html é misturado com a lógica javascript. Você deve tentar evitar isso tanto quanto possível e colocar sua lógica em seu controlador angular. Então, a melhor maneira seria
<a href="#" ng-click="logout($event)" />
E em seu método logout ():
logout($event) {
$event.preventDefault();
...
}
Agora o evento click não alcançará o navegador, portanto não tentará carregar o link apontado por href
. (No entanto, observe que se o usuário clicar com o botão direito do mouse no link e abri-lo diretamente, não haverá nenhum evento de clique. Em vez disso, ele carregará diretamente o url apontado pelo href
atributo.)
Em relação aos comentários sobre a cor do link visitado nos navegadores. Novamente, isso não tem nada a ver com angular, se você href="..."
apontar para uma url visitada pelo seu navegador por padrão, a cor do link será diferente. Isso é controlado por CSS: visitado o seletor , você pode modificar seu css para substituir este comportamento:
a {
color:pink;
}
PS1 :
Algumas respostas sugerem o uso:
<a href .../>
href
é uma diretiva angular. Quando o seu modelo é processado pelo angular, ele será convertido para
<a href="" .../>
Essas duas maneiras são essencialmente as mesmas.