Обновление URL-адреса в Angular JS без повторного рендеринга представления

Я создаю систему панелей управления в AngularJS, и у меня возникла проблема с настройкой URL-адреса через $location.path

На нашей панели инструментов есть несколько виджетов. Каждый из них показывает увеличенное изображение, когда вы нажимаете на него. Мы пытаемся настроить внешние ссылки, чтобы пользователи могли ссылаться на панель управления с развернутым виджетом.

В настоящее время у нас есть 2 маршрута, которые выглядят как /dashboard/:dashboardIdи/dashboard/:dashboardId/:maximizedWidgetId

Когда пользователь разворачивает виджет, мы обновляем URL-адрес, используя $location.path, но это вызывает повторную визуализацию представления. Поскольку у нас есть все данные, мы не хотим перезагружать все представление, мы просто хотим обновить URL-адрес. Есть ли способ установить URL-адрес без повторного рендеринга представления?

HTML5Modeустановлен на true.

Фактически, представление будет отображаться каждый раз, когда вы меняете URL-адрес. Вот как $ routeProvider работает в Angular, но вы можете передать его maximizeWidgetIdкак строку запроса, которая не отображает представление повторно.

App.config(function($routeProvider) {
  $routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false});
});

Когда вы щелкаете виджет, чтобы увеличить его:

<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a>
or
$location.search('maximizeWidgetId', 1);

URL-адрес в адресной строке изменится на http://app.com/dashboard/1?maximizeWidgetId=1

Вы даже можете наблюдать, когда поиск меняется в URL (с одного виджета на другой)

$scope.$on('$routeUpdate', function(scope, next, current) {
   // Minimize the current widget and maximize the new one
});

Вы можете установить для свойства reloadOnSearch $ routeProvider значение false.

Возможный повторяющийся вопрос: можете ли вы изменить путь без перезагрузки контроллера в AngularJS?

С уважением

Для тех, кому нужно изменить полный путь () без перезагрузки контроллеров

Вот плагин: https://github.com/anglibs/angular-location-update

Применение:

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

Мы используем Angular UI Router вместо встроенных маршрутов для аналогичного сценария. Кажется, что он не создает повторно экземпляр контроллера и повторно отображает все представление.

Я понимаю, что это старый вопрос, но поскольку мне потребовалось полтора добрых дня, чтобы найти ответ, так что приступим.

Вам не нужно преобразовывать свой путь в строки запроса, если вы используете angular-ui-router .

В настоящее время из-за того, что может рассматриваться как ошибка , установка reloadOnSearch: falseсостояния приведет к возможности изменить маршрут без перезагрузки представления. Пользователь GitHub lmessinger был даже достаточно любезен, чтобы предоставить его демонстрацию. Вы можете найти ссылку из его комментария, указанного выше.

В основном все, что вам нужно сделать, это:

1. Используйте ui-routerвместоngRoute
2. В ваших штатах объявите те, которые вы хотите, с reloadOnSearch: false

В моем приложении у меня есть представление списка категорий, из которого вы можете перейти в другую категорию, используя такое состояние:

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

Вот и все. Надеюсь это поможет!

Как я это реализовал:
(мое решение в основном для случаев, когда вам нужно изменить весь маршрут, а не его части)

У меня есть страница с меню (menuPage), и данные не должны очищаться при навигации (на каждой странице много входов, и пользователь будет очень недоволен, если данные случайно исчезнут).

1. выключить $ routeProvider

2. в контроллере mainPage добавьте два div с настраиваемым атрибутом директивы - каждая директива содержит только 'templateUrl' и 'scope: true'

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

3. Контроллер mainPage содержит строки для имитации маршрутизации:

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

Это все. Немного некрасиво иметь отдельную директиву для каждой страницы, но использование динамического templateUrl (как функции) в директиве провоцирует повторный рендеринг страницы (и потерю данных входных данных).

Если я правильно понял ваш вопрос, вы хотите,

1. Разверните виджет, когда пользователь находится на / dashboard /: dashboardId, и он разворачивает виджет до максимума.
2. Вы хотите, чтобы у пользователя была возможность вернуться в / dashboard /: dashboardId /: maximizedWidgetId и по-прежнему видеть виджет развернутым.

Вы можете настроить только первый маршрут в routerConfig и использовать RouteParams, чтобы определить, передается ли развернутый виджет в params в контроллере этого настроенного маршрута, и максимизировать тот, который передан как param. Если пользователь максимизирует его в первый раз, поделитесь URL-адресом этого развернутого представления с помощью maximizedWidgetId в пользовательском интерфейсе.

Пока вы используете $ location (который является просто оболочкой над собственным объектом местоположения) для обновления пути, он обновит представление.

У меня есть идея использовать

window.history.replaceState ('Объект', 'Название', '/ новый-url');

Если вы сделаете это, и произойдет цикл дайджеста, это полностью испортит ситуацию. Однако, если вы установите его обратно на правильный URL-адрес, который ожидает angular, все в порядке. Итак, теоретически вы можете сохранить правильный URL-адрес, который ожидает angular, и сбросить его непосредственно перед тем, как вы узнаете, что дайджест сработает.

Однако я не проверял это.

Приведенный ниже код позволит вам изменить URL-адрес без перенаправления, например: http: // localhost / # / 691? Foo? Bar? Blabla

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

Но когда вы перейдете на http: // localhost / # / 692 , вы будете перенаправлены.