UI-Router - 페이지 재렌더/재로드 없이 $state 변경

UI-Router - 페이지 재렌더/재로드 없이 $state 변경

이 페이지(1, 2, 3)를 보고 있습니다.저는 기본적으로 제 기능을$state페이지를 새로고침하지 않도록 하겠습니다.

현재 페이지에 있습니다./schedules/2/4/2014버튼을 클릭했을 때 편집 모드로 들어가 URL이 변경되도록 하고 싶다./schedules/2/4/2014/edit.

나의edit상태는 단순하다$scope.isEdit = true페이지 전체를 새로고침할 필요가 없습니다.하지만, 난 정말 그 사람이$state및/또는url사용자가 페이지를 새로 고친 경우 편집 모드로 시작하도록 변경합니다.

내가 뭘 할 수 있을까?

이 문제에 대해서는, 다음의 어느쪽도 가지지 않는 자스테이트를 작성할 수 있습니다.templateUrl도 아니다controller, 및 그 사이를 진행하다states통상:

// UPDATED
$stateProvider
    .state('schedules', {
        url: "/schedules/:day/:month/:year",
        templateUrl: 'schedules.html',
        abstract: true, // make this abstract
        controller: function($scope, $state, $stateParams) {
            $scope.schedDate = moment($stateParams.year + '-' + 
                                      $stateParams.month + '-' + 
                                      $stateParams.day);
            $scope.isEdit = false;

            $scope.gotoEdit = function() {
                $scope.isEdit = true;
                $state.go('schedules.edit');
            };

            $scope.gotoView = function() {
                $scope.isEdit = false;
                $state.go('schedules.view');
            };
        },
        resolve: {...}
    })
    .state('schedules.view', { // added view mode
        url: "/view"
    })
    .state('schedules.edit', { // both children share controller above
        url: "/edit"
    });

여기서 중요한 개념은ui-router응용 프로그램이 특정 상태에 있는 경우(상태가 "active"일 경우) 모든 상위 상태도 암묵적으로 활성화됩니다.

자, 이 경우,

• 응용 프로그램이 보기 모드에서 편집 모드로 진행되면 상위 상태schedules(그와 함께)templateUrl,controller그리고 심지어resolve)는 그대로 유지됩니다.
• 상위 상태는 암묵적으로 활성화되므로 하위 상태가 새로 고쳐지거나 북마크에서 직접 로드되는 경우에도 페이지는 올바르게 렌더링됩니다.

참조: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statetransitiontoto-toparams--options

$state.transitionTo('yourState', params, {notify: false});

답변이 인정된 답변과 충분히 다르며 다른 사람에게 도움이 될 수 있기 때문에 답변을 추가합니다.

두 개의 주가 있었는데begin그리고.view다수의 옵션 파라미터가 의 URL과 동기화되어 있습니다.view다음과 같은 경우:

$stateProvider
    .state('begin',
        {
            url: '/',
            template: '<app-element></app-element>'
        })
    .state('view',
        {
            url: '/View?param1&param2&...&paramN',
            template: '<app-element></app-element>'
            params: {
               param1: {
                   value: null,
                   squash: true
               },
               ...
            }
        });

링크 함수<app-element>를 사용하여 파라미터를 동기화하려고 하면 언제든지 실행됩니다.$state.go.사용.{notify: false, reload: false}효과가 없었습니다.링크 기능은 매번 실행 중.지금 0.2니까dynamicparam 옵션도 사용할 수 없습니다.나는 @b0nyb0y의 제안을 따라 그것을 부모/자녀 관계로 바꾸었고, 그것은 효과가 있었다.

$stateProvider
    .state('app',
        {
            url: '/',
            template: '<app-element></app-element>'
        })
    .state('app.view',
        {
            url: 'View?param1&param2&...&paramN',
            params: {
               param1: {
                   value: null,
                   squash: true
               },
               ...
            }
        });

언급URL : https://stackoverflow.com/questions/24581610/ui-router-change-state-without-rerender-reload-of-the-page