it-roy-ru.com

Перезагрузка текущего состояния - обновить данные

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

У меня есть 3 уровня: directory.organisations.details

directory.organisations содержит таблицу со списком организаций. Нажатие на элемент в таблице загружает directory.organisations.details с $ StateParams, передающим идентификатор элемента. Таким образом, в состоянии детали я загружаю детали для этого элемента, редактирую их и затем сохраняю данные. Пока все хорошо.

Теперь мне нужно перезагрузить это состояние и обновить все данные.

Я пытался:

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

Который переходит в родительское состояние, но не перезагружает контроллер, я думаю, потому что путь не изменился. В идеале я просто хочу остаться в состоянии directory.organisations.details и обновить все данные в родительском объекте.

Я также попробовал:

$state.reload()

Я видел это в API WIKI для $ state.reload "(ошибка с переустановкой контроллеров прямо сейчас, исправление в ближайшее время)".

Любая помощь будет оценена?

319
Holland Risley

Это решение работает в AngularJS V.1.2.2:

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

Я обнаружил, что это самый короткий рабочий способ обновления с помощью ui-router:

$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

542
Rohan

Это было бы окончательное решение. (вдохновленный постом @ 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();
67
M K

для ionic рамки

$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/issues/582

56
RouR

Вероятно, более чистый подход будет следующим:

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

Мы можем перезагрузить состояние только из HTML.

44
Vaibhav Pachauri

Ответ @Holland Risley теперь доступен в виде API в последнем UI-роутере.

$state.reload();

Метод, который принудительно перезагружает текущее состояние. Все разрешения повторно разрешаются, контроллеры повторно создаются, а события повторно запускаются.

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

19
Muthukannan Kanniappan
$state.go($state.current, $stateParams, {reload: true, inherit: false});
15
Weston Ganger
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };
9
user7961355

если вы хотите перезагрузить всю страницу, как кажется, просто введите $ window в ваш контроллер и затем вызовите

$window.location.href = '/';

но если вы хотите только перезагрузить текущее представление, введите $ scope, $ state и $ stateParams (последнее на тот случай, если вам нужно изменить некоторые параметры в предстоящей перезагрузке, например, номер вашей страницы), тогда вызовите это в любом метод контроллера:

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

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

6
MarcoSantana

Глупый обходной путь, который всегда работает.

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

Все не удалось для меня. Единственное, что сработало ... это добавление cache-view = "false" в представление, которое я хочу перезагрузить при переходе к нему.

из этого выпуска https://github.com/angular-ui/ui-router/issues/582

2
Hans

Не уверен, почему ни один из них, казалось, не работал для меня; тот, который наконец сделал это, был:

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

Это было с Angular 1.4.0

2
BarrySW19

Для angular v1.2.26 ни одно из вышеперечисленных не работает. Чтобы выполнить перезагрузку состояния, нужно нажать ng-click, который вызывает вышеуказанные методы дважды.

Так что я в итоге эмулировал 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;
        }]);
2
thanos panousis

Вы можете использовать ответ @Rohan https://stackoverflow.com/a/23609343/3297761

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

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

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

//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
  });

В этом случае только необходимое представление будет перезагружено, и кэширование все еще будет работать.

1
Dmitriy Nevzorov

Если вы используете ionic v1, приведенное выше решение не будет работать, поскольку ionic включило кэширование шаблонов как часть $ ionicConfigProvider.

Обойти это немного нелепо - вы должны установить кэш на 0 в файле ionic.angular.js:

$ionicConfigProvider.views.maxCache(0);
1
Maksood

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

            .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 });

Работает как шарм и обрабатывает решает.

1
ewahner

У меня была эта проблема, это разрушало мою голову, моя маршрутизация читалась из файла JSON и затем передавалась в директиву. Я мог бы щелкнуть на пользовательском интерфейсе, но не смог перезагрузить страницу. Так что мой коллега показал мне хороший трюк для этого.

  1. Получите ваши данные
  2. В конфиге ваших приложений создайте состояние загрузки
  3. Сохраните состояние, в которое вы хотите перейти в корневой области.
  4. Установите ваше местоположение "/ loading" в вашем app.run
  5. В контроллере загрузки разрешите обещание маршрутизации, а затем установите местоположение в соответствии с намеченной целью.

Это сработало для меня.

Надеюсь, поможет

0
Evan Burbidge