C'è un modo semplice per usare il pulsante per navigare nella pagina come un link in angularjs

Question

In angularjs, voglio usare button in questo modo, ma ho ancora bisogno di cercare il pulsante.

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

Come a (link) fa

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

c'è un modo più semplice di questo?

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

Nota: Acutally, quando ho usato per location.href per la navigazione, il tutto viene aggiornata e la navigazione non è sotto il controllo di angularjs. Se non utilizzo il collegamento, come navigare nella pagina in codice javascript?

Devo creare una direttiva personalizzata per inserirla?

Answer 1

Il tuo ngClick è corretto; hai solo bisogno del servizio giusto. $location è quello che stai cercando. Controlla la documentazione per tutti i dettagli, ma la soluzione alla tua domanda specifica è questo:

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

Il servizio $location aggiungerà il cancelletto (#) se è appropriato in base alle impostazioni correnti e garantire senza ricaricare la pagina si verifica .

Si potrebbe anche fare qualcosa di più flessibile, con una direttiva, se così scelto:

.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); 
     }); 
    }); 
    }; 
}); 

E allora si potrebbe utilizzare su qualsiasi cosa:

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

Ci sono molti modi per migliorare questa direttiva; è solo per mostrare cosa si potrebbe fare. Ecco un Plunker che lo dimostra in azione: http://plnkr.co/edit/870E3psx7NhsvJ4mNcd2?p=preview.

Answer 2

Se stai bene con un po 'di sporcizia, potresti farlo nel modo più semplice e avvolgere il tuo <button> con un ancoraggio (<a>).

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

Inoltre, non c'è nulla ti impedisce di styling un link di ancoraggio per assomigliare ad un <button>

---

come sottolineato nei commenti di @tronman, this is not technically valid html5, ma non dovrebbe causare alcun problemi nella pratica

Answer 3

<a type="button" href="#/new-page.html" class="btn btn-lg btn-success" >New Page</a> 

semplice ...

Answer 4

È possibile anche registrarsi $ posizione sul campo di applicazione nel controller (per renderlo accessibile da HTML)

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

e poi proseguire per il miele nel tuo html:

<button ng-click="$location.path('#/new-page.html')">New Page<button> 

Answer 5

Con bootstrap puoi usare

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

Answer 6

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

Ancora più semplice ... (notare le virgolette che racchiudono l'indirizzo)

Answer 7

Per me, la soluzione migliore è quella di utilizzare router angolare direttive native con ui-sref come:

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

Per capire tale direttiva e piu 'opzioni di visita docs ui-router a:

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

:)