wake-up-neo.com

anglejs UI-Router standardmäßig untergeordneter Status und UI-Sref

Ich habe die folgenden Status in meinem UI-Router-Statusanbieter:

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

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

Dies entspricht der bewährten Vorgehensweise für einen standardmäßigen untergeordneten Status, wie hier in den UI-Router-Dokumenten erläutert.

Wenn ich jetzt jedoch einen Link in mein Dokument einfüge, der auf ui-sref wie <a ui-sref="parent">Link</a> verweist, bekomme ich immer eine Fehlermeldung, dass ich nicht in einen abstrakten Zustand wechseln kann. Wenn ich die URL manuell in die Adressleiste eingebe und die Eingabetaste drücke, funktioniert alles einwandfrei.

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

Wie kann ich ui-sref mit standardmäßigen untergeordneten Status kombinieren?

15
Robin

abstrakte Zustände können nicht direkt anvisiert werden. Sie dienen hauptsächlich als Grundlage, auf der Kindstaaten aufgebaut werden können. Der einzige Grund, warum es gut mit der URL funktioniert, ist, dass der/parent von .when abgefangen wird

Das heißt, wenn Sie ein Kind mit aufrufen 

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

das untergeordnete Element des übergeordneten Elements wird geladen, dh das übergeordnete Element wird als die umgebende Ebene geladen.

Zielen Sie also niemals auf einen abstrakten Zustand selbst. Es ist, als hätte man eine Tür in einem Türrahmen. Sie können nur die Tür (Kind) öffnen und damit interagieren, niemals jedoch direkt mit dem Rahmen (Elternteil). Wenn Sie jedoch mit der Tür interagieren, sind die Tür und der Rahmen Teil eines Systems, das geladen wird.

Sie können dem untergeordneten Element eine leere URL zuweisen, sodass es nichts an die übergeordnete Status-URL anhängt und anschließend geladen wird.

Weitere Informationen finden Sie hier: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

27
Chris Preston

Wenn Sie die praktische Namensstruktur von $state für abstrakte Zustände verwenden möchten, können Sie dies in einem Dienst verwenden:

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

Oder dies in einer Vorlage ($state muss im lokalen oder globalen $scope vorhanden sein):

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

Wenn ich dies regelmäßig tun würde, würde ich eine Anweisung ähnlich wie ui-sref erstellen, abzüglich der Begrenzung des abstrakten Zustands.

1
Zane Hooper