Як перезавантажити поточний стан?


333

Я використовую Angular UI Router і хотів би перезавантажити поточний стан та оновити всі дані / перезапустити контролери для поточного стану та його батьківського.

У мене є 3 рівні стану: directory.organisations.details

directory.organisations містить таблицю зі списком організацій. При натисканні на елемент у таблиці завантажується directory.organisations.details з $ StateParams, що передає ідентифікатор елемента. Тож у стані деталей я завантажую деталі цього елемента, редагую їх і потім зберігаю дані. Все добре поки що.

Тепер мені потрібно перезавантажити цей стан та оновити всі дані.

Я намагався:

 $state.transitionTo('directory.organisations');

Яке переходить у батьківський стан, але не перезавантажує контролер, я думаю, тому що шлях не змінився. В ідеалі я просто хочу залишитися в стані каталогу.organisations.details і оновити всі дані в батьківській програмі.

Я також спробував:

$state.reload()

Я бачив це в API WIKI для $ state.reload "(помилка з контролерами, що перевстановлюються зараз, виправляється незабаром)."

Будь-яка допомога буде вдячна?


7
Я вирішив це так: $ state.transitionTo ($ state.current, $ stateParams, {reload: true, nasledit: false, notify: true});
Holland Risley

1
куди додати цей код?
Маной Г

Отже, помилка виправлена ​​зараз? github.com/angular-ui/ui-router/wiki/…
jchnxu

Куди слід $state.transitionTo($state.current, $stateParams, {reload:true, inherit:false})додати код ? Якщо ця сама проблема з перезавантаженням моїх держав втрачає всі дані.
Еван Бербідж

Відповіді:


565

Я вважаю, що це найкоротший робочий спосіб оновити за допомогою ui-роутера:

$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams

Оновлення для новіших версій:

$state.reload();

Який псевдонім для:

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

Документація: https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload


21
Напевно, варто відзначити, що жодне з них також не перезавантажує сторінку. Якщо ви хочете перезавантажити стан І сторінку, ui-routerя думаю, немає методу для цього. Зробіть window.location.reload(true).
SimplGy

15
@SimpleAsCouldBe, якщо ти хотів би бути більш кутовим щодо цього, ти можеш це зробити $window.location.reload();. Хоча це здається трохи зайвим, але це може полегшити тестування / глузування / знання всіх залежностей, але фрагмент коду має щось легше.
краями

1
Просто цікаво, що саме означає "$ state.current"? Я не бачу чітких пояснень API інтерфейсу маршрутизатора, будь-яка допомога буде вдячна, дякую!
користувач2499325

3
@ user2499325: $ state.current повертає об'єкт із усіма вашими даними у вас stateProvider: `` `{url:" / place /: placeId ", контролер:" NewPlaceController ", controllerAs:" placeVM ", templateUrl:" місця /new.place/new.place.details.html ", назва:" index.places.placeDetails "}` ``
Xavier Haniquaut

1
Ви можете замінити {} на $ stateParams, якщо ви вже завантажили параметри як такі: $ state.go ($ state.current, $ stateParams, {reload: true});
цуз

154

Це рішення працює в AngularJS V.1.2.2:

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

8
Куди ви додали це, щоб воно не викликало нескінченну петлю?
Pathsofdesign

5
Чи це повторно вирішить resolveпункти держави?
TheSharpieOne

7
Крім того, вам не доведеться вводити $ stateParams, якщо ви зміните цей виклик на $ state.params
Jeff Ancel

4
Працює набагато краще, ніж нині відповідь, що найбільше голосує, фактично перезавантажує сторінку. Якщо у вас є проблема нескінченного циклу, перезавантаження, ймовірно, не в тому місці. Я використовую тільки його натисканням кнопки
Dan

2
Трохи запізнюєтесь на @ManojG, але ви поставите цей код куди завгодно, щоб змусити перезавантажити - можливо, в директиві ng-click директиві чи іншій події. Це не слід робити на кожному завантаженні сторінки з очевидних причин (нескінченний цикл)
sricks

68

Це було б остаточне рішення. (натхненний публікацією @ Hollan_Risley)

'use strict';

angular.module('app')

.config(function($provide) {
    $provide.decorator('$state', function($delegate, $stateParams) {
        $delegate.forceReload = function() {
            return $delegate.go($delegate.current, $stateParams, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
        return $delegate;
    });
});

Тепер, коли вам потрібно перезавантажити, просто зателефонуйте:

$state.forceReload();

6
inifinit петля смерті
CS

6
Здається, у вас десь перехоплювач, який спрацьовує. Я кілька разів тестував це рішення, і воно прекрасно працює.
МК

2
@MK Дякую за цю замітку. Це спрямовувало мене на вирішення власної, іншої проблеми. Я витратив години, намагаючись з’ясувати, чому мої запити збільшувалися вдвічі, потім втричі і т. Д., І все це було через перехоплювача ( github.com/witoldsz/angular-http-auth ).
Мацей Гурбан

57

для іонних каркасів

$state.transitionTo($state.current, $state.$current.params, { reload: true, inherit: true, notify: true });//reload

$stateProvider.
  state('home', {
    url: '/',
    cache: false, //required

https://github.com/angular-ui/ui-router/isissue/582


Для мене добре працює, коли $state.goне вдалося переспрямуватись до нового стану. Дякую @RouR. Врятував мій день.
Гійом Вуйп

Думаю, замініть $ state.go на $ state.transitionTo. Тож де б ви не називали $ state.go, просто замініть це. Це може виглядати приблизно як $ state.transitionTo ('табу-ім’я', {ключ: значення}, {reload: вірно, успадковувати: істинно, повідомляти: справжнє}
Bill Pope

2
кеш: помилка робить фокус .. але на скільки це впливає на продуктивність?
FrEaKmAn

змінити $ state.go з $ state.transitionTo для зміни стану і перезарядка @ManojG
Джері

Чи потрібно включати якусь нову бібліотеку для використання $state? Я працюю на іонному 1.4.0, кутовий 1.5.3
josinalvo

45

Можливо, чистішим підходом буде такий:

<a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>

Ми можемо перезавантажити стан лише з HTML.


7
Ви також можете використовувати ui-sref-opts = "{reload: 'child.state'}", щоб уникнути перезавантаження всієї сторінки, де 'child.state' - це рядок, що представляє ваш фактичний стан.
Майкл Фултон

21

Відповідь @Holland Risley тепер доступна як api в останньому інтерфейсі маршрутизатора.

$state.reload();

Метод, який примушує перезавантажувати поточний стан. Усі рішення повторно вирішуються, контролери відновляються, а події повторно звільняються.

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state




7

якщо ви хочете перезавантажити всю свою сторінку, як здається, просто введіть $ window у свій контролер, а потім зателефонуйте

$window.location.href = '/';

але якщо ви хочете лише перезавантажити свій поточний вигляд, введіть $ range, $ state та $ stateParams (останнє про всяк випадок, якщо вам потрібно буде змінити параметри цього майбутнього перезавантаження, щось на зразок номера вашої сторінки), тоді зателефонуйте це в будь-який номер метод контролера:

$stateParams.page = 1;
$state.reload();

AngularJS v1.3.15 angular-ui-router v0.2.15


6

Дурне рішення, яке завжди працює.

$state.go("otherState").then(function(){
     $state.go("wantedState")
});

3

Для кутового v1.2.26 жоден з перерахованих вище не працює. Клацнувши ng, який викликає вищевказані методи, доведеться двічі клацнути , щоб перезавантажити стан.

Тож я завершив емуляцію 2 клацань за допомогою $ timeout.

$provide.decorator('$state',
        ["$delegate", "$stateParams", '$timeout', function ($delegate, $stateParams, $timeout) {
            $delegate.forceReload = function () {
                var reload = function () {
                    $delegate.transitionTo($delegate.current, angular.copy($stateParams), {
                        reload: true,
                        inherit: true,
                        notify: true
                    })
                };
                reload();
                $timeout(reload, 100);
            };
            return $delegate;
        }]);

Navigation.reload () вимагав двох клацань з кутовим 1.3.0-rc0, але перехідTo () спрацював нормально. Можливо, спробуйте оновити, якщо у вас є ця проблема
хитрощі


3

Не впевнений, чому, здається, жодне з них не працювало на мене; нарешті це зробив:

$state.reload($state.current.name);

Це було з кутовим 1.4.0


2

У мене було кілька вкладених переглядів, і метою було перезавантажити лише один із вмістом. Я спробував різні підходи, але єдине, що працювало для мене, це:

//to reload
$stateParams.reload = !$stateParams.reload; //flip value of reload param
$state.go($state.current, $stateParams);

//state config
$stateProvider
  .state('app.dashboard', {
    url: '/',
    templateUrl: 'app/components/dashboard/dashboard.tmpl.html',
    controller: 'DashboardController',
    controllerAs: 'vm',
    params: {reload: false} //add reload param to a view you want to reload
  });

У цьому випадку буде потрібно перезавантажувати лише потрібне представлення даних, а кешування все ще працюватиме.


reload true або false, u згадується як false. false перезавантажить вміст останніми змінами?
деканд

2

Я знаю, що було багато відповідей, але найкращий спосіб, який я знайшов це зробити, не викликаючи повного оновлення сторінки, - це створити фіктивний параметр на маршруті, який я хочу оновити, а потім, коли я закликаю маршрут, проходжу в випадкове число до параметри манекена.

            .state("coverage.check.response", {
                params: { coverageResponse: null, coverageResponseId: 0, updater: 1 },
                views: {
                    "coverageResponse": {
                        templateUrl: "/Scripts/app/coverage/templates/coverageResponse.html",
                        controller: "coverageResponseController",
                        controllerAs: "vm"
                    }
                }
            })

а потім дзвінок на цей маршрут

$state.go("coverage.check.response", { coverageResponse: coverage, updater: Math.floor(Math.random() * 100000) + 1 });

Працює як шарм і справляється з рішенням.


2

Ви можете використовувати @Rohan відповідь https://stackoverflow.com/a/23609343/3297761

Але якщо ви хочете, щоб кожен контролер перезавантажився після зміни перегляду, ви можете використовувати

myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(0); ... }

2

Якщо ви використовуєте ionic v1, вищевказане рішення не працюватиме, оскільки ionic увімкнув кешування шаблонів у складі $ ionicConfigProvider.

Подолання цього трохи хитке - потрібно встановити кеш на 0 у файлі ionic.angular.js:

$ionicConfigProvider.views.maxCache(0);

1

У мене була ця проблема, це було розбиття моєї голови, мою маршрутизацію читають з файлу JSON і потім подають у директиву. Я міг натиснути на ui-стан, але не зміг завантажити сторінку. Тож моя колега показала мені приємну маленьку хитрість до цього.

  1. Отримайте свої дані
  2. У налаштуваннях додатків створіть стан завантаження
  3. Збережіть стан, у який ви хочете перейти, в кореневому корені.
  4. Встановіть своє місцезнаходження на "завантаження" у своєму додатку.run
  5. У контролері завантаження вирішіть обіцянку маршрутизації, а потім встановіть місце розташування за призначенням.

Це працювало для мене.

Сподіваюся, це допомагає

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.