Angular-ui-router-ng-wenn die aktuellen genauen Zustand

Schwierigkeiten haben, die Verwaltung meiner Eltern-Kind-Staat vor allem als ich neu bin, um ui-router. Aber, ich habe geforscht und bin auf Lösungen, die erfordern eine harte Codierung von Strecken, aber nicht dynamisch sind.

Was ich derzeit habe:

<div> <!-- parent state -->
    <div ng-if="'.' | isState">
        <!-- 
          background hierarchy that should be visible only when
          parent state is active and not a child state of the parent
        -->
    </div>
    <nav>
        <a ui-sref="." ui-sref-active="active">Parent</a>
        <a ui-sref=".child1" ui-sref-active="active">Child 1</a>
        <a ui-sref=".child2" ui-sref-active="active">Child 2</a>
    </nav>
    <div ui-view></div>
</div>

Was ich versuche zu erreichen?
Wenn die Eltern lädt, möchte ich den hintergrund etwas zu zeigen. Es den ganzen Bildschirm einnimmt. Die ui-view nimmt nicht den ganzen Bildschirm. Als solche, ich möchte hintergrund-element versteckt oder entfernt, wenn die route nicht genau dem übergeordneten Staat (wenn Eltern Weg ist /root/parent, ich will hintergrund werden nur sichtbar, wenn der Zustand ist genau /root/parent und nicht /root/parent/child1).

Ich bin in der Lage zu erreichen, was ich möchte, nur wenn ich den genauen erwartete route. Zum Beispiel ng-if="'root.parent' | isState".

Auch ui-sref-active="active" behält active Klasse, wenn Kinder Ansichten angezeigt werden (es erwartet, aber ich will, dass die Klasse nur aktiv sein, wenn die route exakt überein).

Allerdings habe ich nicht das Gefühl, dass es gut ist, hart-code route der Eltern in den Blick. Ich will einfach nur, es zu entsprechen, welchen Weg es gehört. Als solcher, wenn ich später entscheiden, um es zu /root/parent/car, ich sollte nicht zu aktualisieren ng-if und ui-sref-active um die änderung widerzuspiegeln.

Hat jemand lief in das Problem und konnte es lösen?

  • Was ist der Grund für die parent-child-Hierarchie ?
  • entfernen active Klasse von Kind Routen <a ui-sref=".child1">Child 1</a> und fügen Sie css zu active Klasse, so dass es nur erscheint im hintergrund.
  • Die wichtigsten Inhalte der Seite auch tatsächlich angezeigt als hintergrund und die Kinder enthalten optionale Inhalte ausgeblendet werden können.
InformationsquelleAutor DraganTL | 2017-03-23



4 Replies
  1. 3

    Verwenden $state.current.name für Ihren Zustand

    <div ng-if="$state.current.name === 'state1'">
    
    </div>
    • Stellen Sie sicher, dass Sie nicht state-name in Anführungszeichen eingeschlossen werden. wie ng-if="$state.current.name === 'state1'" , es sollte wie ng-if="$state.current.name === state1"
    • es arbeitet mit einfachen Anführungszeichen
  2. 1

    Danke für die Antworten, aber eine der Bedingungen in einer Lösung, die ich suchte war, um zu versuchen und vermeiden Sie hart codierte Zustand. Meine Lösung ist wie folgt:

    Für die nav-links, die ich Lesen musste das die ui-router Richtlinie code zu finden ui-sref-active-eq Richtlinie, die ich angewendet, in der folgenden Weise:

    <nav>
        <a ui-sref="." ui-sref-active-eq="active">Parent</a>
        <a ui-sref=".child1" ui-sref-active="active">Child 1</a>
        <a ui-sref=".child2" ui-sref-active="active">Child 2</a>
    </nav>

    Die Richtlinie sicherstellen, dass Parent link ist nur aktiv, wenn die URL ist genau gleich, um die Eltern-URL.

    Als für das ein-und ausblenden des hintergrund habe ich den folgenden code. Wieder, beachten Sie, dass in keinem Fall kann ich hard-code ein Staat name:

    function ParentController ($scope, $state, $stateParams, $q) {
        var model = this;
        var controllerState = $state.current.name;
    
        $scope.showBackground = true;
    
        $scope.$on('$stateChangeSuccess', onStateChange);
    
        init();
    
        function init () {
            onStateChange();
        }
    
        function onStateChange() {
            $scope.showBackground = $state.is(controllerState);
        }
    }

    Und dann in der Ansicht:

    <div ng-if="showBackground">
        <!-- 
          background hierarchy that should be visible only when
          parent state is active and not a child state of the parent
        -->
    </div>
  3. 0

    Dies kann in wenigen Arten, wie Sie vielleicht einen parentController trennen.

    Können Sie überprüfen den Zustand im controller und verhindern, dass es in der Ansicht mit ng-if

    Controller:

    app.controller('myCtrl', function($scope,$state) {
         if($state.current.name == 'your parentstate')
            {
              $scope.stateName = true;
            }
         else
            {
              $scope.stateName = false;
            }
    
    });

    Anzeigen:

    <div ng-if="stateName">
      //this only executes if current stateName is parent state
    </div>

    Die oben nur ausgeführt wird, wenn der aktuelle stateName ist übergeordneten staatlichen

    Oder,

    Können Sie einfach entfernen active class vom Kind Routen,

     <a ui-sref=".child1">Child 1</a> 
     <a ui-sref=".child2">Child 2</a>

    Nun fügen Sie CSS, um die aktive Klasse, so dass es nur angezeigt wird im hintergrund für die Eltern.

    • überprüfen Sie bitte meine Antwort.
    • Sorry, das geht nicht auf einen Teil im OP, wo ich nicht wollen, hart-code ein-Zustand (selbst oder Eltern). Ich habe das Problem gelöst nur jetzt und werde nach meiner Lösung.
  4. 0

    Die einfachste Lösung ist die Kontrolle des Staates in der Steuerung und tun, was Sie tun müssen,

    app.controller('appCtrl', function($scope, $state) {
        if ($state.is('my-active-state')) {
            //do stuff when the state is active
        } else {
            //do stuff when the state is NOT active
        }
    });

    Überprüfen Sie die Docs für mehr info.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.