Wyczyść historię i załaduj ponownie stronę podczas logowania / wylogowywania za pomocą Ionic Framework

Nie mam doświadczenia w tworzeniu aplikacji mobilnych z Ionic. Podczas logowania i wylogowywania muszę ponownie załadować stronę, aby odświeżyć dane, jednak $state.go('mainPage')przenosi użytkownika z powrotem do widoku bez przeładowywania - kontroler za nią nigdy nie jest wywoływany.

Czy istnieje sposób na wyczyszczenie historii i ponowne załadowanie stanu w Ionic?

Witamy w frameworku! W rzeczywistości routing w Ionic jest zasilany przez router ui . Prawdopodobnie powinieneś sprawdzić to poprzednie pytanie SO, aby znaleźć kilka różnych sposobów, aby to osiągnąć.

Jeśli chcesz tylko przeładować stan, możesz użyć:

$state.go($state.current, {}, {reload: true});

Jeśli faktycznie chcesz ponownie załadować stronę (tak jak w przypadku, chcesz ponownie załadować wszystko), możesz użyć:

$window.location.reload(true)

Powodzenia!

Okazało się, że odpowiedź JimTheDev działa tylko wtedy, gdy została cache:falseustawiona definicja stanu . Dzięki buforowaniu widoku możesz to zrobić, $ionicHistory.clearCache()a następnie, $state.go('app.fooDestinationView')jeśli nawigujesz z jednego stanu do tego, który jest buforowany, ale wymaga odświeżenia.

Zobacz moją odpowiedź tutaj, ponieważ wymaga prostej zmiany na Ionic i utworzyłem żądanie ściągnięcia: https://stackoverflow.com/a/30224972/756177

Poprawna odpowiedź:

$window.location.reload(true);

Znalazłem rozwiązanie, które pomogło mi to zrobić. Ustawienie cache-view="false"na ion-viewtagu rozwiązało mój problem.

<ion-view cache-view="false" view-title="My Title!">
  ....
</ion-view>

Ponowne załadowanie strony nie jest najlepszym podejściem.

możesz obsłużyć zdarzenia zmiany stanu w celu ponownego załadowania danych bez ponownego ładowania samego widoku.

Przeczytaj o cyklu życia ionicView tutaj:

http://blog.ionic.io/navigating-the-changes/

i obsłuż zdarzenie beforeEnter w celu ponownego załadowania danych.

$scope.$on('$ionicView.beforeEnter', function(){
  // Any thing you can think of
});

W moim przypadku muszę wyczyścić tylko widok i ponownie uruchomić kontroler. Mogę zrozumieć mój zamiar za pomocą tego fragmentu:

$ionicHistory.clearCache([$state.current.name]).then(function() {
  $state.reload();
}

Pamięć podręczna nadal działa i wygląda na to, że wyczyszczono tylko widok.

ionic --version mówi 1.7.5.

Żadne z wyżej wymienionych rozwiązań nie działało w przypadku nazwy hosta innej niż localhost!

Musiałem dodać notify: false do listy opcji, do których przechodzę $state.go, aby uniknąć wywoływania słuchaczy zmian Angular, zanim $window.location.reloadpołączenie zostanie wywołane. Ostateczny kod wygląda następująco:

$state.go('home', {}, {reload: true, notify: false});

>>> EDYCJA - w zależności od przeglądarki konieczne może być podanie $ timeout >>>

$timeout(function () { $window.location.reload(true); }, 100);

<<< KONIEC EDYCJI <<<

Więcej informacji na ten temat znajdziesz w dokumentacji ui-routera .

Próbowałem odświeżyć stronę za pomocą angularjs, kiedy zobaczyłem strony internetowe, pomyliłem się, ale żaden kod nie działał dla kodu, a następnie otrzymałem rozwiązanie do ponownego załadowania strony za pomocą

$state.go('path',null,{reload:true});

użyj tego w funkcji, która będzie działać.

Musiałem przeładować stan, aby paski przewijania działały. Nie działały, gdy przekraczały inny stan - „rejestracja”. Jeśli aplikacja została wymuszona po rejestracji i ponownie otwarta, tj. Przeszła bezpośrednio do stanu „początkowego”, paski przewijania działały. Żadne z powyższych rozwiązań nie zadziałało.

Gdy po rejestracji wymieniłem:

$state.go("home");

z

window.location = "index.html"; 

Aplikacja została ponownie załadowana, a paski przewijania działały.

Kontroler jest wywoływany tylko raz i POWINIENEŚ zachować ten model logiczny, co zwykle robię to:

Tworzę metodę $scope.reload(params)

Na początku tej metody dzwonię $ionicLoading.show({template:..}) aby pokazać mój niestandardowy spinner

Po zakończeniu procesu ponownego ładowania mogę zadzwonić $ionicLoading.hide() jako oddzwonienie

Na koniec dodaję wewnątrz przycisku ODŚWIEŻ ng-click = "reload(params)"

Jedynym minusem tego rozwiązania jest utrata systemu historii nawigacji jonowej

Mam nadzieję że to pomoże!

Jeśli chcesz ponownie załadować po zmianie widoku, musisz

$state.reload('state',{reload:true});

Jeśli chcesz, aby ten widok był nowym „korzeniem”, możesz powiedzieć ionic, że następnym widokiem będzie korzeń

 $ionicHistory.nextViewOptions({ historyRoot: true });
 $state.go('app.xxx');
 return;

Jeśli chcesz, aby kontrolery ładowały się ponownie po każdej zmianie widoku

app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.views.maxCache(0);

.state (url: '/ url', kontroler: Ctl, templateUrl: 'template.html', cache: false) cache: false ==> rozwiązałem mój problem!

Jak wskazały kontrolery @ezain przeładowujące tylko wtedy, gdy jest to konieczne. Innym czystszym sposobem aktualizowania danych podczas zmiany stanów, zamiast ponownego ładowania kontrolera, jest wykorzystanie zdarzeń transmisji i nasłuchiwanie takich zdarzeń w kontrolerach, które muszą aktualizować dane w widokach.

Przykład: w funkcjach logowania / wylogowania możesz zrobić coś takiego:

$scope.login = function(){
    //After login logic then send a broadcast
    $rootScope.$broadcast("user-logged-in");
    $state.go("mainPage");
};
$scope.logout = function(){
   //After logout logic then send a broadcast
   $rootScope.$broadcast("user-logged-out");
   $state.go("mainPage");
};

Teraz w kontrolerze mainPage wyzwalaj zmiany w widoku, używając funkcji $ on, aby słuchać transmisji w kontrolerze mainPage w następujący sposób:

$scope.$on("user-logged-in", function(){
     //update mainPage view data here eg. $scope.username = 'John';
});

$scope.$on("user-logged-out", function(){
    //update mainPage view data here eg. $scope.username = '';
});

Próbowałem wielu metod, ale stwierdziłem, że ta metoda jest absolutnie poprawna:

$window.location.reload();

Mam nadzieję, że pomoże to innym utknąć na wiele dni, takich jak ja z wersją: kątowa 1.5.5, jonowa 1.2.4, kątowa-ui-router 1.0.0