Umleitung zu einer Seite beim ersten laden und nach aktualisieren

Arbeite ich an einer zwei-Seiten-AngularJS-app, wo der Benutzer muss die komplette erste Seite, bevor er auf die zweite Seite.

Habe ich meine $routeProvider-setup wie folgt:

$routeProvider.
        when('/config', {templateUrl: 'views/config.html', controller: ConfigController}).
        when('/levels', {templateUrl: 'views/levels.html', controller: LevelsController}).
        otherwise({redirectTo: '/config'});

So wird der Benutzer zunächst geschickt auf die Config-Seite, und nach dem ausfüllen einiger Felder, Sie drücken eine Taste und ergriffen werden, um die Level-Seite. Das Problem ist, dass wenn Sie die Seite aktualisieren, während Sie sind auf der Ebenen Seite, ich brauche Sie, um wieder das Config-Seite, füllen Sie die Felder wieder, bevor Sie kommen zurück, um die Level-Seite.

Gibt es eine Möglichkeit, dies zu erreichen?

können Sie montieren ein plunk bitte?
Sie möchten, wenn der Benutzer aktualisieren , die er immer zur 1. Seite
Wie werden die Informationen weitergegeben, die aus der ersten Seite zu der zweiten Seite? Ich meine, Sie wollen nicht die zweite Seite angezeigt werden, es sei denn, die erste Seite geladen ist -, wie oder eher wo speichern Sie die Daten auf der ersten Seite, und wie teilen Sie diese Informationen mit der zweiten Seite?

InformationsquelleAutor Jordan | 2013-09-15

angularjs

Was Sie tun können, ist das erstellen einer scope-variable in der main-controller und überprüfen Sie dann, ob diese variable initialisiert wurde oder nicht.

angular.module('MyApp', [], function($routeProvider) {
$routeProvider.
        when('/config', {templateUrl: 'views/config.html', controller: ConfigController}).
        when('/levels', {templateUrl: 'views/levels.html', controller: LevelsController}).
        otherwise({redirectTo: '/config'});
});

function MainCntl($scope) {
  $scope.hasConfig = false;
}

function ConfigController($scope, $location) {
  //they press a button and are taken to the Levels page
  $scope.onSubmit = function () {
    $scope.hasConfig = true;
    $location.path('/levels');
  }
}

function LevelsController($scope, $location) {
  if($scope.hasConfig) {
    $location.path('/config');
  } else {
    //Stay on page
  }
}

Und Ihre html-könnte sein :

<body ng-app="MyApp">
  <div ng-controller="MainCntl">
    <div ng-view></div>
  </div>
</body>

Danke für die Anregung, ich landete mit einer leichten variation. Ich machte eine Fabrik, die ein Objekt zurückgibt, mit einem config_completed variable zuerst auf false gesetzt, dann wird meiner ConfigController die senden, ich Stelle es auf true, und am Anfang meiner LevelsController ich redirect auf die Config-Seite, wenn die variable false ist.

InformationsquelleAutor Nicolas ABRIC

1

Ich habe einen ähnlichen Anwendungsfall: Eine Assistenten-Stil-flow mit 3 "Seiten"; der Benutzer füllt die Daten im 1., bestätigt dann die Daten in die 2. und die 3. zeigt das Ergebnis.

Bookmarking die inneren "Seiten" ist bedeutungslos: es sei denn, die entsprechenden Daten gefüllt ist-in-der Benutzer muss immer umgeleitet werden, auf der 1. Seite.

Den Weg, die wir lösen diese Fälle ist nicht Verwendung von routing; eine einzelne route Häuser, die alle N-Seiten unter einer ng-switch:
```
<div ng-switch="view.state">
    <div ng-switch-when="dataEntry">
        <div ng-include="..."></div>
    </div>
    <div ng-switch-when="confirmation">
        <div ng-include="..."></div>
    </div>
    <div ng-switch-when="outcome">
        <div ng-include="..."></div>
    </div>
</div>
```
Und in der Steuerung der route:
```
angular.extend($scope, {
    view: {
        state: "dataEntry",
        ....
    },
    ....
});
```
So, wenn dieser controller ist aktiviert, sieht der Benutzer die "dataEntry" - Bildschirm. Dies, kombiniert mit schicken Animationen, funktioniert der trick.

Alternative zu ng-include ist eine Richtlinie pro inneren Seite.

Ich nicht, habe den code jetzt, aber ich denke, die HTML können abgekürzt werden zu:
```
<div ng-switch="view.state">
    <div ng-switch-when="dataEntry" ng-include="..."></div>
    <div ng-switch-when="confirmation" ng-include="..."></div>
    <div ng-switch-when="outcome" ng-include="..."></div>
</div>
```
InformationsquelleAutor Nikos Paraskevopoulos

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.