start - angularjs ui-router estado hijo predeterminado y ui-sref

ui router params

Question

Tengo los siguientes estados en mi proveedor de estado ui-enrutador:

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

Que sigue la mejor práctica para tener un estado secundario predeterminado como se explica aquí en los documentos de ui-router.

Sin embargo, cuando ahora ui-sref un enlace en mi documento en alguna parte haciendo referencia a parent con ui-sref , como <a ui-sref="parent">Link</a> , siempre <a ui-sref="parent">Link</a> un error que dice que no puedo pasar a un estado abstracto. Cuando ingreso la URL manualmente en la barra de direcciones y presiono enter todo funciona bien.

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

¿Cómo puedo combinar ui-sref con los estados secundarios predeterminados?

Answer 1

los estados abstractos no pueden ser dirigidos directamente. Principalmente sirven como base para construir estados secundarios. La única razón por la que funciona bien con la URL es que el / padre queda atrapado por el .when

Eso significa que cuando invocas a un niño usando

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

el niño dentro del padre se carga, lo que significa que el padre se cargará como la capa que lo rodea.

Por lo tanto, nunca meta un estado abstracto en sí mismo. Es como tener una puerta dentro de un marco de puerta. Solo puede abrir e interactuar con la puerta (niño), pero nunca con el marco (principal) directamente. Sin embargo, cuando interactúas con la puerta, la puerta y el marco son parte de un sistema que se carga.

Puede darle al niño una URL vacía, para que no anexe nada al URL del estado principal y luego se cargue.

Consulte aquí para obtener más información: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

Answer 2

Si desea utilizar la conveniente estructura de nombres de $state para estados abstractos, puede usar esto en un servicio:

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

O esto en una plantilla ( $state debe estar disponible en el $scope local o global):

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

Si me encontrara haciendo esto regularmente, crearía una directiva similar a ui-sref para esto, menos la limitación de estado abstracto.