2016-08-26 2 views
7

Ich bin auf der Suche nach etwas, das der Version 1.0 von UI-Routers $rootScope.$on('$stateChange...' Funktionalität in etwa entsprechen würde. Ich bin mir des neuen $ Überblendungsdienstes bewusst, kann aber nicht genau herausfinden, wie ich es auf die gleiche Weise zur Arbeit bringen kann.

ich ein Minimum reproduzierbaren Plunker unten erstellt haben, um zu versuchen und zu zeigen, wie ich zur Zeit den Dienst bin mit und hoffen, in der Version 1.0 um dies zu erreichen einen kleinen Einblick in den neuen Ansatz zu bekommen + UI-Router

https://plnkr.co/edit/ddabHc9oXEbqMoNZHYs2?p=preview

Nicht nur der Übergang scheint nicht bei jedem Übergang zu zünden, aber es schießt überhaupt nicht für Kind Übergänge. Ist das das erwartete Verhalten? Es scheint auf Geschwisterzuständen zu feuern, aber scheint auch nur einmal zu feuern (möglicherweise weil Caching beteiligt ist?). Ich würde denken, dass, selbst wenn der "Zustand" über den Cache geladen wird, ein "Übergang" immer noch stattfindet.

Interessiert, die gewünschte Funktionalität hier zu kennen. Vielen Dank!

Antwort

8

1) Ihr Plünderer ist kaputt und der Fehler macht die Ergebnisse verwirrend. Sie benötigen einen Titel hinzufügen, indem Sie Ihre ng-repeat die Fehler in der Konsole zu stoppen:

> angular.js:13920 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: transition in transitions, Duplicate key: string:Started loading main, Duplicate value: Started loading main

2) Die glob * nur eine einzige staatliche Ebene übereinstimmt. Verwenden Sie **, um "gierig" zu entsprechen (es wird dann auch dem untergeordneten Status entsprechen) { to: '**' }

3) Alle Kriterienschlüssel sind optional. Wenn irgendwelche weggelassen werden, stimmen sie implizit mit allem überein. Statt { to: '**' }, ziehe ich eine leere Kriterien {} Objekt

4) Übergänge Um besser zu verstehen, verwenden Sie die UI-Router Visualizer und aktivieren Sie die ui-Router-Trace-Service für Übergänge (überprüfen Sie die Konsole). app.run($trace => $trace.enable('TRANSITION'))

Hier ist eine aktualisierte zupfen mit diesen Änderungen: https://plnkr.co/edit/AO49n8biBBEnfnsxPbns?p=preview

die documentation for Transition Service Lesen Sie die jeden Lebenszyklus Haken beschreibt:

  • onBefore
  • onStart
  • onExit (Zustand Haken)
  • onRetain (Zustandshaken)
  • onEnter (Zustand Haken)
  • OnFinish
  • onSuccess
  • onError

Lesen Sie mehr über hook criteria objects, um weitere Informationen darüber, wie Sie bestimmte Übergänge ausrichten können.

+0

Danke für detaillierte Antwort! Anders als # 1 (was ein wenig peinlich ist) hoffe ich, dass dies anderen hilft, da ich die in der Dokumentation zuvor beschriebene '**' Syntax nicht gesehen habe. Danke für den Leckerbissen über die optionalen Kriterienschlüssel. Wird ab sofort den Visualizer verwenden –

Verwandte Themen