현재 상태를 다시로드하는 방법?


333

Angular UI Router를 사용하고 있으며 현재 상태를 다시로드하고 모든 데이터를 새로 고치거나 현재 상태 및 상위에 대한 컨트롤러를 다시 실행하고 싶습니다.

나는 3 가지 상태 수준이 있습니다 : directory.organisations.details

directory.organisations 에는 조직 목록이 포함 된 테이블이 있습니다. 테이블로드의 항목을 클릭 directory.organisations.details 항목의 ID를 전달 $ StateParams와. 세부 정보 상태 에서이 항목의 세부 정보를로드하고 편집 한 다음 데이터를 저장합니다. 지금까지는 괜찮 았습니다.

이제이 상태를 다시로드하고 모든 데이터를 새로 고쳐야합니다.

나는 시도했다 :

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

부모 상태로 이동하지만 컨트롤러를 다시로드하지 않는 경로는 변경되지 않았기 때문입니다. 이상적으로는 directory.organisations.details 상태 를 유지 하고 부모의 모든 데이터를 새로 고치기를 원합니다 .

나는 또한 시도했다 :

$state.reload()

나는 $ state.reload에 대한 API WIKI에서 이것을 보았습니다.

도움이 필요하십니까?


7
나는 이것을 다음과 같이 해결했다 : $ state.transitionTo ($ state.current, $ stateParams, {reload : true, inherit : false, notify : true});
Holland Risley

1
이 코드를 어디에 추가합니까?
Manoj G

이제 버그가 수정 되었습니까? github.com/angular-ui/ui-router/wiki/…
jchnxu

코드를 어디에 $state.transitionTo($state.current, $stateParams, {reload:true, inherit:false})추가해야합니까? 내 상태를 다시로드 할 때 이와 동일한 문제가 발생하면 모든 데이터가 손실됩니다.
Evan Burbidge

답변:


565

나는 이것이 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


21
아마도 이들 중 어느 것도 실제로 페이지를 다시로드하지 않는다는 점에 주목할 가치가 있습니다. 상태와 페이지를 다시로드하려면 ui-router방법 이 없습니다 . 마십시오 window.location.reload(true).
SimplGy 2016 년

15
@SimpleAsCouldBe 당신이 그것에 대해 더 많은 각도를 원한다면 당신은 할 수 있습니다 $window.location.reload();. 이것은 약간 과잉으로 보이지만 모든 종속성을 테스트 / 조롱 / 알기 쉽게 만들 수 있습니다.
edhedges

1
"$ state.current"가 정확히 무엇을 의미하는지 궁금합니다. ui-router의 API에 대한 명확한 설명을 볼 수 없습니다. 감사합니다.
user2499325

3
@ user2499325 : $ state.current는 stateProvider에있는 모든 데이터가 포함 된 객체를 반환합니다.```{url : "/ place / : placeId", 컨트롤러 : "NewPlaceController", controllerAs : "placeVM", templateUrl : "places /new.place/new.place.details.html ", 이름 :"index.places.placeDetails "}```
Xavier Haniquaut

1
이미로드 된 매개 변수가있는 경우 {}를 $ stateParams로 바꿀 수 있습니다. $ state.go ($ state.current, $ stateParams, {reload : true});
tsuz

154

이 솔루션은 AngularJS V.1.2.2에서 작동합니다.

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

8
무한 루프를 일으키지 않도록 이것을 어디에 추가 하시겠습니까?
Pathsofdesign

5
resolve상태 항목을 다시 해결 합니까?
TheSharpieOne

7
또한 호출을 $ state.params로 변경하면 $ stateParams를 주입 할 필요가 없습니다
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
어딘가에 요격기가있는 것처럼 들립니다. 이 솔루션을 여러 번 테스트했으며 정상적으로 작동합니다.
MK

2
@MK 감사합니다. 그것은 내 자신의 다른 문제의 해결책을 향해 나를 조종했다. 내 요청이 두 배가 된 다음 세 배가 된 이유를 찾으려고 몇 시간을 보냈으며 인터셉터 ( github.com/witoldsz/angular-http-auth ) 때문이었습니다 .
Maciej Gurban

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


$state.go새로운 상태로 리디렉션하지 못한 경우 잘 작동합니다 . 감사합니다 @RouR. 내 하루를 구했다.
기 illa 우 ip

나는 $ state.go를 $ state.transitionTo로 대체한다고 생각합니다. 그래서 당신이 $ state.go를 호출하는 곳마다 그것을 대체하십시오. $ state.transitionTo ( 'tab-name', {key : value}, {reload : true, inherit : true, notify : true}
Bill Pope

2
캐시 : 속임수는 거짓이지만 성능에 어느 정도 영향을 미칩니 까?
FrEaKmAn

변화 상태와 다시로드 @ManojG에 $ state.transitionTo와 $ state.go을 변경
GERY

사용할 새 라이브러리를 포함시켜야 $state합니까? 나는 이온 1.4.0, 각도 1.5.3을 실행
중이다.

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'는 실제 상태를 나타내는 문자열입니다.
Michael Fulton



13
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };

7

보이는 것처럼 전체 페이지를 다시로드하려면 컨트롤러에 $ window를 삽입하고 호출하십시오.

$window.location.href = '/';

그러나 현재보기 만 다시로드하려면 $ scope, $ 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-click을 두 번 클릭해야합니다 .

그래서 $ 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 ()에는 Angular 1.3.0-rc0으로 두 번의 클릭이 필요했지만 transitionTo ()는 정상적으로 작동했습니다. 이 문제가있는 경우 업그레이드를 시도하십시오.
sricks


3

왜 이들 중 어느 것도 나를 위해 작동하지 않는 것 같지 않습니다. 마지막으로 한 것은 다음과 같습니다.

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

이것은 Angular 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
  });

이 경우 필요한 뷰만 다시로드되고 캐싱은 여전히 ​​작동합니다.


true 또는 false를 다시로드합니다 (u로 언급 됨). 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

ionic v1을 사용하는 경우 ionic이 $ ionicConfigProvider의 일부로 템플릿 캐싱을 활성화했기 때문에 위의 솔루션이 작동하지 않습니다.

그 문제는 약간 해키입니다. ionic.angular.js 파일에서 캐시를 0으로 설정해야합니다.

$ionicConfigProvider.views.maxCache(0);

1

나는이 문제를 겪어 머리를 부수고 내 JSON 파일에서 라우팅을 읽은 다음 지시문에 넣었습니다. ui-state를 클릭 할 수 있지만 페이지를 다시로드 할 수 없습니다. 그래서 내 동료가 나에게 멋진 작은 트릭을 보여주었습니다.

  1. 데이터 가져 오기
  2. 앱 구성에서 로딩 상태를 만듭니다.
  3. 루트 스코프에서 가고자하는 상태를 저장하십시오.
  4. app.run에서 위치를 "/ loading"으로 설정하십시오.
  5. 로딩 컨트롤러에서 라우팅 약속을 해결 한 다음 원하는 위치로 위치를 설정하십시오.

이것은 나를 위해 일했습니다.

그것이 도움이되기를 바랍니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.