come utilizzare l'uso di ancoraggio in html con router ui

Question

ho usato router ui angolare, proprio come

.state('home', { 
     url: '/home', 
     templateUrl: 'view/home/home.html', 
     controller: 'homeCtrl' 
    }) 
.state('guide', { 
     url: '/guide', 
     templateUrl: 'view/guide/guide.html', 
     controller: 'guideCtrl' 
    }) 

e posso visitare in browser con un URL, http://localhost:8000/dist/#/home Tuttavia, non posso utilizzare un ancoraggio nel mio html se c'è un ancoraggio in home.html come questo

<a href="#aaa">scroll to aaa</a> 
.... 
<h1 id="aaa">AAA</h1> 

quando clicco "scorrere a aaa", l'URL sarà http://localhost:8000/dist/#/aaa e restituire un ancoraggio sinistra.L vuoto in home.html non funziona .

Come posso risolvere questo problema?

Answer 1

Non è un problema con i router, è a causa del tag base. È necessario aggiungere il percorso della pagina corrente prima dell'ID in href. Prova questo: (non ho provato)

<a ui-sref="state_of_current_page" href="#your_id">link to id</a> 

Risorse: tutsplus article about base tag related question in SO

Answer 2

Assicurarsi di avere una versione ui-router più recente rispetto a 0.2.14, che è stata la prima versione a supporta gli ancoraggi html in ui-router. Tutte le versioni possono essere trovate on github, dove ho notato per la prima volta che it was supported.

dato la vostra configurazione di instradamento:

.state('home', { 
    url: '/home', 
    templateUrl: 'view/home/home.html', 
    controller: 'homeCtrl' 
}) 
.state('guide', { 
    url: '/guide', 
    templateUrl: 'view/guide/guide.html', 
    controller: 'guideCtrl' 
}) 

Creare un collegamento in ogni caso:

<a href="" ui-sref="home({'#': 'aaa'})">Scroll to AAA</a> 

In mostra page/home/home.html

.... 
.... 
<h1 id="aaa">AAA</h1> 

Answer 3

Utilizzare ui-sref insieme al tag href. L'href è usato per puntare l'id locale della pagina. E l'ui-sref dovrebbe puntare allo stato della stessa pagina. Ad esempio,

<a href="myId" ui-sref="stateOfCurrentPage"> any Link </a> 

Ciò farà scorrere la pagina all'elemento richiede senza aggiungere nulla al proprio URL.

Uso sintassi quali

ui-sref="home({'#': 'aaa'})" 

si tradurrà nel fare il lavoro, ma si aggiungerà l'hash per l'url. Ciò produrrebbe anche un errore di sintassi quando si utilizzano altri framework come jQuery.