Buduję system pulpitów nawigacyjnych w AngularJS i mam problem z ustawieniem adresu URL przez $location.path
W naszym panelu mamy kilka widżetów. Każdy z nich pokazuje większy, zmaksymalizowany widok po kliknięciu. Próbujemy skonfigurować głębokie linki, aby umożliwić użytkownikom łączenie się z pulpitem nawigacyjnym z zmaksymalizowanym widżetem.
Obecnie mamy 2 trasy, które wyglądają jak /dashboard/:dashboardId
i/dashboard/:dashboardId/:maximizedWidgetId
Gdy użytkownik maksymalizuje widżet, aktualizujemy jego adres URL za pomocą $location.path
, ale powoduje to ponowne renderowanie widoku. Ponieważ mamy wszystkie dane, nie chcemy przeładowywać całego widoku, chcemy tylko zaktualizować URL. Czy istnieje sposób na ustawienie adresu URL bez powodowania ponownego renderowania widoku?
HTML5Mode
jest ustawiony na true
.
źródło
Odpowiedzi:
W rzeczywistości widok będzie renderowany za każdym razem, gdy zmienisz adres URL. Tak właśnie działa $ routeProvider w Angular, ale można go przekazać
maximizeWidgetId
jako obiekt typu querystring, który nie renderuje ponownie widoku.App.config(function($routeProvider) { $routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false}); });
Gdy klikniesz widżet, aby zmaksymalizować:
<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a> or $location.search('maximizeWidgetId', 1);
Adres URL w pasku adresu zmieniłby się na
http://app.com/dashboard/1?maximizeWidgetId=1
Możesz nawet obserwować, gdy wyszukiwanie zmienia się w adresie URL (z jednego widżetu na inny)
$scope.$on('$routeUpdate', function(scope, next, current) { // Minimize the current widget and maximize the new one });
źródło
$routeUpdate
wydarzenia. Myślę, że$routeChangeStart
uruchamia się, gdy przenosisz się do innej lokalizacji.Możesz ustawić właściwość reloadOnSearch elementu $ routeProvider na wartość false.
Możliwe zduplikowane pytanie: czy możesz zmienić ścieżkę bez ponownego ładowania kontrolera w AngularJS?
pozdrowienia
źródło
Dla tych, którzy potrzebują zmiany pełnej ścieżki () bez przeładowywania kontrolerów
Oto wtyczka: https://github.com/anglibs/angular-location-update
Stosowanie:
$location.update_path('/notes/1');
źródło
Używamy routera Angular UI zamiast wbudowanych tras w podobnym scenariuszu. Nie wydaje się, aby ponownie tworzył instancję kontrolera i ponownie renderował cały widok.
źródło
$state.transitionTo()
zamiast$location.path()
?$state.transitionTo()
?$state.transitionTo()
co z kolei zaktualizuje hash adresu URL.Zdaję sobie sprawę, że to stare pytanie, ale ponieważ znalezienie odpowiedzi zajęło mi półtora dnia, więc proszę.
Jeśli używasz angular-ui-router, nie musisz konwertować ścieżki na ciągi zapytań .
Obecnie, z powodu tego, co można uznać za błąd , ustawienie
reloadOnSearch: false
stanu spowoduje możliwość zmiany trasy bez ponownego ładowania widoku. Użytkownik GitHub, lmessinger, był nawet na tyle uprzejmy, aby udostępnić jego wersję demonstracyjną. Możesz znaleźć link z jego komentarza, do którego link znajduje się powyżej.Zasadniczo wszystko, co musisz zrobić, to:
ui-router
zamiastngRoute
reloadOnSearch: false
W mojej aplikacji mam widok listy kategorii, z którego można przejść do innej kategorii, używając takiego stanu:
$stateProvider.state('articles.list', { url: '{categorySlug}', templateUrl: 'partials/article-list.html', controller: 'ArticleListCtrl', reloadOnSearch: false });
Otóż to. Mam nadzieję że to pomoże!
źródło
Jak to zaimplementowałem:
(moje rozwiązanie głównie w przypadkach, gdy trzeba zmienić całą trasę, a nie jej części)
Mam stronę z menu (menuPage) i dane nie powinny być czyszczone w nawigacji (na każdej stronie jest dużo danych wejściowych i użytkownik będzie bardzo niezadowolony, jeśli dane znikną przypadkowo).
w kontrolerze mainPage dodaj dwa elementy div z atrybutem dyrektywy niestandardowej - każda dyrektywa zawiera tylko „templateUrl” i „scope: true”
<div ng-show="tab=='tab_name'" data-tab_name-page></div>
Kontroler mainPage zawiera linie symulujące routing:
if (!$scope.tab && $location.path()) { $scope.tab = $location.path().substr(1); } $scope.setTab = function(tab) { $scope.tab = tab; $location.path('/'+tab); };
To wszystko. Trochę brzydko jest mieć osobną dyrektywę dla każdej strony, ale użycie dynamicznego templateUrl (jako funkcji) w dyrektywie powoduje ponowne renderowanie strony (i utratę danych wejściowych).
źródło
Jeśli dobrze zrozumiałem twoje pytanie, chcesz,
Możesz skonfigurować tylko pierwszą trasę w konfiguracji routera i użyć RouteParams do określenia, czy zmaksymalizowany widżet jest przekazywany w parametrach w kontrolerze tej skonfigurowanej trasy i zmaksymalizować tę przekazaną jako parametr. Jeśli użytkownik maksymalizuje go za pierwszym razem, udostępnij adres URL do tego zmaksymalizowanego widoku za pomocą maximizedWidgetId w interfejsie użytkownika.
Dopóki używasz $ location (który jest po prostu opakowaniem na natywnym obiekcie lokalizacji) do aktualizacji ścieżki, odświeży widok.
źródło
Mam pomysł do wykorzystania
window.history.replaceState ('Obiekt', 'Tytuł', '/ nowy-url');
Jeśli to zrobisz i nastąpi cykl trawienia, to całkowicie wszystko zepsuje. Jeśli jednak ustawisz go z powrotem na prawidłowy adres URL, który oczekuje, że angular jest w porządku. Więc teoretycznie możesz zapisać poprawny adres URL, którego oczekuje angular i zresetować go tuż przed uruchomieniem skrótu.
Jednak nie testowałem tego.
źródło
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 gdy zmienisz na http: // localhost / # / 692 , zostaniesz przekierowany.
źródło