angularjs ui-router stato di figlio di default e ui-sref

Question

ho i seguenti stati nel mio ui-router fornitore di Stato:

$urlRouterProvider.when('/parent', '/parent/child'); 
$stateProvider.state('parent', { 
    url: "/parent", 
    abstract: true 
}); 

$stateProvider.state('parent.child', { 
    url: "/child" 
}); 

che segue la prassi migliore per avere uno stato figlio di default come spiegato here nel documenti per ui-router.

Tuttavia, quando ora includo un collegamento nel mio documento da qualche parte con riferimento a parent con ui-sref come <a ui-sref="parent">Link</a>, viene sempre visualizzato un errore che indica che non è possibile passare a uno stato astratto. Quando inserisco manualmente l'URL nella barra degli indirizzi e premo invio, tutto funziona correttamente.

Plunker correlati: http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

Come posso combinare ui-sref con gli stati del bambino di default?

Answer 1

Gli stati astratti non possono essere indirizzati direttamente. Servono principalmente come base per costruire stati bambini. L'unica ragione che funziona bene con l'URL è che il/genitore viene catturato dal .quando

Questo significa che quando si richiama un bambino utilizzando

<a ui-sref="parent.child"> 

il bambino dentro il genitore viene caricata, il che significa il genitore verrà caricato come lo strato attorno ad esso.

Quindi, non indirizzare mai uno stato astratto. È come avere una porta dentro la cornice di una porta. È possibile solo aprire e interagire con la porta (figlio), ma mai con la cornice (genitore) direttamente. Tuttavia, quando interagisci con la porta, la porta e il telaio fanno parte di un sistema che viene caricato.

È possibile fornire al bambino un URL vuoto, in modo che non aggiunga nulla all'URL dello stato padre e verrà quindi caricato.

Vedi qui per ulteriori informazioni: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

Answer 2

Se si desidera utilizzare comoda struttura di denominazione $state s' per gli stati astratti, è possibile utilizzare questo in un servizio:

$location.path(
    $state.href('app.some.abstract.state', { some: 'params' }) 
); 

O questo in un modello ($state deve essere disponibile nel $scope locale o globale):

<a ng-href="{{$state.href('app.some.abstract.state', { some: 'params' })}}">...</a> 

Se mi sono trovato a farlo regolarmente, creerei una direttiva simile a ui-sref per questo, meno la limitazione dello stato astratto.