AngularJS ui-router, Blättern Sie zum nächsten Schritt über Staatliche ändern

Ich bin mit UI-router in meine app und ich würde gerne so ein einfaches "scrollTo" auf einen Anker, wenn die URL/Status ändert. Ich will nicht zum laden der nächste Schritt aus einer Vorlage laden oder einen neuen controller. Ich würde nur gerne mehrere divs auf der Seite und Blättern Sie nach oben und unten zwischen Ihnen. Eine vereinfachte Ansicht des HTML wäre dies.

    <div id="step1">
        <button ng-click="moveToStep2()">Continue</button>
    </div>
    <div id="step2">
        <button ng-click="moveToStep3()">Continue</button>
    </div>
    <div id="step3">
        Step 3 content
    </div>

So, wenn Sie geben Sie die Seite an die URL domain.com/booking

Wenn Sie die erste Schaltfläche klicken, ich würde gerne meine controller-code zum ändern der URL, um domain.com/#/step-2 und scrollen Sie nach unten zu "Schritt 2" div.

Ideal, wenn der Nutzer den zurück-button wieder auf die erste URL und Blättern Sie zurück zu Schritt 1.

Weiß jemand, wie dies zu tun?

InformationsquelleAutor jonhobbs | 2014-08-04
  1. 13

    Ersten. Sie müssen definieren den Staat.

    .state('step1', {
    url: '/step-1'
})

    Hinzufügen onEnter controller (so können Sie $inject Dinge).

    .state('step1', {
    url: '/step-1',
    onEnter: function () {}
})

    Animieren (oder einfach "scrollen") zu element

    $('html, body').animate({
    scrollTop: $("#step1").offset().top
}, 2000);

    Hier Beispiel

    • Kann ich diese auf eine Seite, die hat keine UI-view tag obwohl?
    • Yep. Aus der Dokumentation: The ui-view directive tells $state where to place your templates., so, wenn Sie nicht verwenden Sie Vorlagen, die Sie brauchen es nicht.
    InformationsquelleAutor Umidbek Karimov
  2. 9

    Mit

    Können Sie etwas wie das hier tun:

    $stateProvider.state("step1", {
  template: 'template.html',
  controller: ...,
  onEnter: function(){
      $location.hash('step1');
      $anchorScroll();
  }
});
...
    InformationsquelleAutor Lajos Veres
  3. 1

    Können Sie hören $locationChangeSuccess z.B.

    $rootScope.$on('$locationChangeSuccess', scrollBasedOnLocationChangeEvent);

    Einfaches Beispiel: http://angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouter

    • OK, also sollte ich nur einige Staaten, die alle auf den gleichen URL, hören Sie dann den Speicherort ändern und die Verwendung jqLite innen animieren die Zuhörer diese Arbeit zu machen? Ich hatte gehofft, dass die UI-router würde die Möglichkeit haben, dies zu tun, so dass ich nicht haben, um scrolling-code in meinen controller.
    • Ich würde nicht diesen code in einer controller - aber es sieht aus wie onEnter ist die richtige Lösung.
    InformationsquelleAutor Riley Lark
  4. 0

    Wenn die divs sind bereits auf der aktuellen Seite, einfach codieren Sie die href der aktuellen

    <div id="step1">
<a href="wizard.html#/wizard/start#step1">Continue to step 1</a>
</div>
<div id="step2">
<a href="wizard.html#/wizard/start#step2">Continue step 2</a>
</div>
<div id="step3">
    Step 3 content
</div>

<a name="#step2">STEP 2</a>

<a name="#step1">STEP 1</a>
    • Ich brauche eine Funktion aufgerufen wird, mithilfe von ng-klicken Sie auf den ersten, weil es um einen Anruf zu tätigen, um meine API mit den details zur Buchung. außerdem ist die Umgehung der UI-router eine gute Idee? Ich würde eher rufen Sie den Router .die go () - Methode als nur Fenster.Lage wie ich will der Geschichte zu arbeiten.
    InformationsquelleAutor user3909593
Schreibe einen Kommentar