angularjs-interfaccia utente del router di default bambino stato e ui-sref

Ho il seguente uniti nel mio ui-router provider di stato:

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

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

Che segue la pratica migliore per avere un bambino predefinito stato come spiegato qui nell’interfaccia utente del router docs.

Tuttavia, quando ho incluso un link nel mio documento da qualche parte fa riferimento genitore con ui-sref come <a ui-sref="parent">Link</a> ricevo sempre un errore che dice che non posso transizione verso un abstract di stato. Quando devo inserire manualmente l’URL nella barra degli indirizzi e premere invio tutto funziona bene.

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

Come posso combinare ui-sref con bambino predefinito stati?

  • Tutti abstract degli stati richiedono che si fornire il template proprietà con il valore <ui-view/>, come figlio / a modello/Url collega ad esso. Ora, se hai fatto a href con <a ui-sref="parent.child"> come @Chris-Preston suggerito, il tuo url barra di carico /#/padre/figlio. Questo mi ha aiutato, link. Almeno se ho capito bene. Qualcuno fatemi sapere se mi sbaglio :S
InformationsquelleAutor Robin | 2014-07-26



2 Replies
  1. 27

    abstract membri non possono essere contattati direttamente. Essi servono principalmente come base per costruire bambino uniti. L’unico motivo per cui funziona bene con l’URL è che l’ /padre viene catturato dal .quando

    Che significa che quando si richiama un bambino, utilizzando

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

    il bambino dentro il genitore viene caricato, il che significa che il genitore sarà caricato come strato intorno ad esso.

    Così, mai come target un’astratta stato stesso. È come avere una porta all’interno di un telaio di una porta. Si può solo aprire e interagire con la porta (bambino), ma mai con il telaio (genitore) direttamente. Tuttavia, quando si interagisce con la porta, la porta e il telaio sono parte di un sistema che viene caricato.

    Si può dare al bambino un URL vuoto, in modo che questo non aggiunge nulla allo stato genitore URL e quindi essere caricato.

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

    • Sicuro di aver capito i limiti di un abstract di stato, ma il pensiero che, se è possibile definire un bambino predefinito stato dovrebbe anche essere possibile inoltrare automaticamente tutte le chiamate dal genitore al figlio (cioè il comportamento logico di ui-sref sarebbe il bambino predefinito di stato). Nel mio caso il genitore è attualmente in astratto, e non è necessario, ma potrebbe poi diventata una pagina di se stesso (si pensi pagina panoramica per un intero concetto). Ma sembra che non funziona bene con l’interfaccia utente del router.
    • come indicato, dando al bambino stato un vuoto URL è possibile accedere a questo bambino stato utilizzando il genitore URL nella barra degli indirizzi. Tuttavia, da questo stato di cose, utilizzando l’interfaccia utente-sref dall’app stessa si può colpire solo il bambino direttamente
    • Ottenuto che, grazie!
    • Questo dovrebbe essere contrassegnato come risposta e +1 per il link.
    • E ‘ possibile avere nidificati abstract stati come un nonno.genitore.bambino dove il nonno e il padre sono astratti stati ?
    • Poiché questo è il caso, come una transizione da un login stato un abstract dashboard stato? Oppure c’è un altro modo per fare che?

  2. 1

    Se si desidera utilizzare $state‘s conveniente denominazione struttura astratta stati, è possibile utilizzare questo in un servizio:

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

    O questo in un modello ($state devono essere disponibili in locale o globale $scope):

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

    Se mi sono trovato a fare questo regolarmente, vorrei creare una direttiva simile a ui-sref per questo, meno astratta stato limitazione.

Lascia un commento