Ich habe eine exemplarische Vorgehensweise in meiner App, die 4 Seiten umfasst. Ich habe beschlossen, die exemplarische Vorgehensweise zu einem einzelnen Zustand mit mehreren Ansichten zu machen, um jede der 4 Seiten darzustellen.

In meinem HTML-Code definiere ich ein Div als eine UI-Ansicht, die auf die aktuelle Ansicht verweist und die mein Controller dann nach Bedarf ändert.

Das Problem ist, wenn ich $ scope.currentView auf 'general' aktualisiere, ändert sich nicht, was tatsächlich auf dem Bildschirm angezeigt wird! Wenn ich es in meiner _init-Funktion manuell in 'general' ändere, wird die allgemeine Seite angezeigt, aber ich kann sie nicht auf der Grundlage eines Tastenklicks ändern.

HTML:

<div ui-view="{{currentView}}@walkthrough"></div>

Regler

var _init = function () {
    $scope.currentView = 'welcome';
};
_init();

$scope.setView = function (view) {
    $scope.currentView = view;
};

Meine Zustandsdefinition:

.state('walkthrough', {
    url: '/walkthrough',
    views: {
        '': {
            templateUrl: 'app/walkthrough/walkthrough.html',
            controller: 'walkthroughController'
        },
        'welcome@walkthrough': {
            templateUrl: 'app/walkthrough/welcome.html'
        },
        'general@walkthrough': {
            template: 'general'
        }
    }
})

Und die Schaltfläche zum Aktualisieren der Ansicht:

<img class="start-button center-block" ng-click="setView('general')" />

Update 1

Ich habe Folgendes versucht, um zu lösen, von denen keines funktioniert hat:

Changing currentView zu einer Getter-Funktion getCurrentView (), die die currentView zurückgibt. Gleiches Verhalten.Den CurrentView-Setter in einen $ scope. $ Apply einwickeln. Holen Sie sich die $ gelten bereits in Bearbeitung Fehler Den CurrentView-Setter in ein $ Timeout einwickeln. Gleiches Verhalten

Update 2

Ich habe ein @ hinzugefü<pre> Abschnitt, der den gleichen Code wie in der UI-Ansicht aufruft,{{currentView}}@walkthrough. Es wird die korrekte Ansicht angezeigt, obwohl die Seite selbst die neue Ansicht nicht aktualisiert.

Update 3

Ich habe jede Kombination aus programmgesteuertem Einstellen der Ansicht ausprobiert, aber nichts, was ich ausprobiert habe, hat funktioniert. Ob ich einen Server benutze, um die Ansicht, Funktion, $ scope Variable, nichts zu greifen. Die Variable selbst ist korrekt, aber die Ansicht ändert sich nicht, wenn ich die Variable ändere.

Der seltsame Teil ist, dass es einmal funktioniert, wenn ich den Wert von currentView in meiner init () - Funktion setze. Es funktioniert, wenn ich den Wert in eine der nächsten Ansichten im Code selbst ändere ($ scope.currentView = 'general' <- dies zeigt die allgemeine Seite), aber nicht, wenn ich auf eine Schaltfläche klicke, ändere ich die aktuelle Ansicht in 'general' .

Ich habe alle Arten von $ scope. $ Applys, $ digests und $ timeouts ausprobiert. Durch nichts, was ich tue, wird die Ansicht selbst aktualisiert. Das einzige, was noch übrig ist, ist, es in eine Gruppe von Divs mit ng-show / hide zu verwandeln, was wirklich hässlich und mühsam ist, und der Grund, warum ich zuerst Views verwenden wollte.

Update 4

Noch kein Fortschritt, egal was ich versuche ... Ich dachte, eine komische Kombination aus dem Einschließen der Variablenänderung in ein $ timeout könnte sich als nützlich erweisen, aber leider nichts. Mein letzter Gedanke war, all diese in ihre eigenen unabhängigen Zustände zu verwandeln, aber dann werde ich einen Haufen duplizierten Codes haben, der offensichtlich nicht gut ist. Ich verwende fast dieselbe Art von Änderung in einem anderen Abschnitt meiner App (um jedoch den Status zu ändern, nicht um Ansichten zu ändern), und sie funktioniert einwandfrei. Ich kann nicht herausfinden, warum ich die Ansicht nicht dynamisch ändern kann. Jede Hilfe wäre sehr dankbar.

Update 5

Hatte nach dem Kommentar des Benutzers unten etwas Zuhause, aber es hat nirgendwo hingeführt. Ich habe versucht, alle möglichen $ state-Änderungen aufzurufen, um die Ansicht zu aktualisieren, aber nichts hat funktioniert. Ich habe alle folgenden Methoden ausprobiert, von denen keine Auswirkungen auf die Seite hatte:

$state.reload();
$state.go($state.current, {}, { reload: true });
$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});