angularjs ui-Router stan domyślny dziecko i UI-sref

Question

Mam następujące stany w moim UI-routera dostawcy Stan:

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

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

co wynika najlepszą praktykę za posiadanie stan domyślny dziecko jak wyjaśniono here w Ui-router docs.

Jednak, gdy dołączę teraz link do mojego dokumentu, który odwołuje się do elementu nadrzędnego z ui-sref, taki jak <a ui-sref="parent">Link</a>, zawsze pojawia się komunikat o błędzie, że nie mogę przejść do stanu abstrakcyjnego. Po ręcznym wpisaniu adresu URL w pasku adresu i naciśnięciu klawisza Enter wszystko działa poprawnie.

Powiązane Plunker: http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

Jak mogę połączyć ui-sref ze stanami domyślny dziecko?

Answer 1

abstrakcyjnych stanów nie można kierować bezpośrednio. Służą głównie jako podstawa do budowy stanów dziecka. Jedynym powodem, to działa dobrze z adresem URL jest to, że/rodzic zostaje złapany przez .Przy

Oznacza to, że podczas wywoływania dziecko używając

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

dziecka wewnątrz rodzica jest ładowany, czyli rodzica zostanie załadowany jako warstwa wokół niego.

Więc nigdy nie celuj w sam abstrakcyjny stan. To tak jakby mieć drzwi wewnątrz ościeżnicy. Możesz otworzyć i wejść w interakcję z drzwiami (dziecko), ale nigdy z ramką (rodzicem) bezpośrednio. Jednakże, kiedy wchodzisz w interakcję z drzwiami, drzwi i rama są częścią systemu, który zostaje załadowany.

Możesz podać dziecku pusty adres URL, aby nie dodawał niczego do adresu URL nadrzędnego stanu, a następnie został załadowany.

Zobacz tutaj, aby uzyskać więcej informacji: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

Answer 2

Jeśli chcesz korzystać z dogodnego struktury nazewnictwa $state „s dla państw abstrakcyjnych, można to wykorzystać w służbie:

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

Or to w szablon ($state muszą być dostępne w lokalnej lub globalnej $scope):

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

Gdybym robił to regularnie, utworzyłbym dyrektywę podobną do ui-sref dla tego, minus abstrakcyjne ograniczenie stanu.