start - angularjs ui-router estado hijo predeterminado y ui-sref
ui router params (2)
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?
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
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.