¿Hay una forma simple de usar el button para navegar la página como lo hace un enlace en angularjs

En angularjs, quiero usar un button como este, pero aún necesito que se mire el button.

 <button href="#/new-page.html">New Page<button> 

Como hace a (enlace)

 <a href="#/new-page.html">New Page</a> 

¿Hay una manera más simple que esto?

 <button ng-click="newPage()">New Page<button> $scope.newPage = function (){ location.href = '#/new-page.html'; }; 

Nota: Acutally, cuando utilicé location.href para la navigation, el set se actualiza y la navigation no está bajo el control de angularjs. Si no uso el enlace, ¿cómo navegar por la página en el código de JavaScript?

¿Debo crear una directiva personalizada para implementarla?

Su ngClick es correcto; solo necesitas el service correcto. $location es lo que estás buscando. Consulte los documentos para get todos los detalles, pero la solución a su pregunta específica es esta:

 $location.path( '/new-page.html' ); 

El service $location agregará el hash (#) si es apropiado en function de su configuration actual y garantizará que no se vuelva a cargar la página.

También podría hacer algo más flexible con una directiva si así lo desea:

 .directive( 'goClick', function ( $location ) { return function ( scope, element, attrs ) { var path; attrs.$observe( 'goClick', function (val) { path = val; }); element.bind( 'click', function () { scope.$apply( function () { $location.path( path ); }); }); }; }); 

Y luego podrías usarlo en cualquier cosa:

 <button go-click="/go/to/this">Click!</button> 

Hay muchas forms de mejorar esta directiva; es solo para mostrar lo que se puede hacer. Aquí hay un Plunker que lo demuestra en acción: http://plnkr.co/edit/870E3psx7NhsvJ4mNcd2?p=preview .

Si está bien con ensuciar un poco su marcado, puede hacerlo de la manera más fácil y simplemente ajuste su <button> con un enlace de anclaje ( <a> ).

 <a href="#/new-page.html"><button>New Page<button></a> 

Además, no hay nada que te impida diseñar un enlace de anclaje para que parezca un <button>


como se señala en los comentarios de @tronman, esto no es técnicamente válido html5 , pero no debería causar ningún problema en la práctica

Con bootstrap puedes usar

 <a href="#/new-page.html" class="btn btn-primary"> Click </a> 

También puede registrar $ location en el scope en el controller (para hacer que sea accesible desde html)

 angular.module(...).controller("...", function($location) { $scope.$location = $location; ... }); 

y luego ve directamente por la miel en tu html:

 <button ng-click="$location.path('#/new-page.html')">New Page<button> 
  <a type="button" href="#/new-page.html" class="btn btn-lg btn-success" >New Page</a> 

Sencillo…

Para mí, la mejor solución es usar directivas nativas de enrutador angular con ui-sref como:

 <button ui-sref="state.name">Go!!</button> 

Para entender esa directiva y get más opciones, visite los documentos de ui-router en:

https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.directive:ui-sref

🙂

 <button type="button" href="location.href='#/nameOfState'">Title on button</button> 

Aún más simple … (tenga en count las comillas simples alnetworkingedor de la dirección)