web-dev-qa-db-fra.com

angularjs état enfant par défaut du routeur ui et ui-sref

J'ai les états suivants dans mon fournisseur d'état ui-router:

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

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

Ce qui suit la meilleure pratique pour avoir un état enfant par défaut comme expliqué ici dans la documentation ui-router.

Cependant, lorsque j'inclus maintenant un lien dans mon document qui référence quelque part le parent avec ui-sref, tel que <a ui-sref="parent">Link</a>, j'obtiens toujours une erreur indiquant que je ne peux pas passer à un état abstrait. Lorsque j'entre l'URL manuellement dans la barre d'adresse et que j'appuie sur enter, tout fonctionne correctement.

Liens connexes: http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

Comment combiner ui-sref avec des états enfants par défaut?

angularjsangular-uiangular-ui-router
15
Robin

les états abstraits ne peuvent pas être ciblés directement. Ils servent principalement de base pour construire des états d'enfants. La seule raison pour laquelle cela fonctionne bien avec l'URL est que le/parent est attrapé par le .when

Cela signifie que lorsque vous appelez un enfant en utilisant 

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

l'enfant à l'intérieur du parent est chargé, ce qui signifie que le parent sera chargé en tant que couche autour de lui.

Donc, ne ciblez jamais un état abstrait lui-même. C'est comme avoir une porte dans un cadre de porte. Vous pouvez uniquement ouvrir et interagir avec la porte (enfant), mais jamais directement avec le cadre (parent). Cependant, lorsque vous interagissez avec la porte, la porte et le cadre font partie d'un système chargé.

Vous pouvez donner à l'URL une adresse vide pour qu'il ne rajoute rien à l'URL de l'état parent et soit chargé.

Voir ici pour plus d’informations: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

27
Chris Preston

Si vous souhaitez utiliser la structure de nommage pratique de $state pour les états abstraits, vous pouvez l'utiliser dans un service:

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

Ou ceci dans un modèle ($state doit être disponible dans le $scope local ou global __):

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

Si je le faisais régulièrement, je créerais une directive similaire à ui-sref pour ceci, moins la limitation de l'état abstrait.

1
Zane Hooper