Aktualizacja adresu URL w Angular JS bez ponownego renderowania widoku

Możesz ustawić właściwość reloadOnSearch $routeProvider na false.

Możliwe zduplikowane pytanie: Czy można zmienić ścieżkę bez przeładowywania kontrolera w AngularJS?

Pozdrawiam

Dla tych, którzy potrzebują zmienić pełną ścieżkę () bez kontrolerów reload

Oto plugin: https://github.com/anglibs/angular-location-update

Użycie:

$location.update_path('/notes/1');

Dla podobnego scenariusza używamy routera Angular UI zamiast wbudowanych tras. Nie wydaje się, aby ponownie utworzyć instancję kontrolera i ponownie renderować cały widok.

Zdaję sobie sprawę, że to stare pytanie, ale ponieważ znalezienie odpowiedzi Zajęło mi półtora dnia, więc proszę bardzo.

Nie musisz konwertować ścieżki do ciągów zapytań , Jeśli używasz angular-ui-router.

Obecnie, ze względu na to, co Może być uznane za błąd, ustawienie reloadOnSearch: false na stanie spowoduje możliwość zmiany trasy bez przeładowywania widoku. Użytkownik GitHub lmessinger był nawet na tyle uprzejmy, że udostępnił jego demo. Można znaleźć link z jego komentarza podlinkowany powyżej.

W zasadzie wszystko, co musisz zrobić, to:

1. Użyj ui-router zamiast ngRoute
2. w swoich stanach deklaruj te, których pragniesz reloadOnSearch: false

W mojej aplikacji mam widok listy kategorii, z którego możesz przejść do innej kategorii za pomocą stanu takiego jak:

$stateProvider.state('articles.list', {
  url: '{categorySlug}',
    templateUrl: 'partials/article-list.html',
    controller: 'ArticleListCtrl',
    reloadOnSearch: false
  });

Jak to zaimplementowałem:
(moje rozwiązanie Głównie w przypadkach, gdy trzeba zmienić całą trasę, a nie Części podrzędne)

Mam stronę z menu (menuPage) i dane nie powinny być czyszczone w nawigacji (na każdej stronie jest dużo wejść i użytkownik będzie bardzo niezadowolony, jeśli dane znikną przypadkowo).

1. Wyłącz $routeProvider

2. W kontrolerze strony głównej dodaj dwa divy z atrybutem custom directive - każda dyrektywa zawiera tylko "templateUrl" i "scope: true"

    <div ng-show="tab=='tab_name'" data-tab_name-page></div>
   

3. MainPage Controller zawiera linie do symulacji trasowania:

   if (!$scope.tab && $location.path()) {
       $scope.tab = $location.path().substr(1);
   }
   $scope.setTab = function(tab) {
       $scope.tab = tab;
       $location.path('/'+tab);
   };
   

Jeśli dobrze zrozumiałem twoje pytanie, chcesz,

1. zmaksymalizuj widget, gdy użytkownik jest na /dashboard/: dashboardId i maksymalizuje widget.
2. chcesz, aby użytkownik miał możliwość wrócić do /dashboard/: dashboardid/: maximizedWidgetId i nadal zobaczyć widget zmaksymalizowany.

Możesz skonfigurować tylko pierwszą trasę w routerConfig i użyć RouteParams aby określić, czy maksymalny widżet jest przekazywany w params w kontrolerze ta skonfigurowana trasa i zmaksymalizuj tę, która przeszła jako param. Jeśli użytkownik maksymalizuje go za pierwszym razem, Udostępnij adres url do tego zmaksymalizowanego widoku za pomocą maksymalizedwidgetid w interfejsie użytkownika.

Dopóki używasz $location (która jest tylko opakowaniem nad natywnym obiektem lokalizacji) do aktualizacji ścieżki, odświeży to Widok.

Mam pomysł na użycie

Okno.historia.replaceState('Object', 'Title', '/new-url');

Jeśli to zrobisz i dojdzie do cyklu trawienia, to całkowicie wszystko zmanipuluje. Jeśli jednak ustawisz go z powrotem na poprawny adres url, który oczekuje od angular, że jest w porządku. Więc teoretycznie możesz zapisać poprawny adres url, którego oczekuje angular i zresetować go tuż przed odpaleniem digest.

Nie testowałem tego jednak.

Poniższy kod pozwoli Ci zmienić adres url bez przekierowania, np.: http://localhost/#/691?foo?bar?blabla

for(var i=0;i<=1000;i++) $routeProvider.when('/'+i, {templateUrl: "tabPages/"+i+".html",reloadOnSearch: false});

Ale kiedy zmienisz na http://localhost/#/692 , zostaniesz przekierowany.