경로 변경간에보기 (컨트롤러) 상태를 유지하는 방법은 무엇입니까?

Question

AngularJS로 작성된 단일 페이지 응용 프로그램과 ui-router를 사용하여 상태 전이 (라우팅)를 관리합니다.

function config($stateProvider) { 
    $stateProvider 
    .state('social.search', { 
     url: '/search', 
     templateUrl: 'views/social/search/social-search-view.html', 
     controller: 'SocialSearchController', 
     controllerAs: 'vm' 
    }); 
} 

이보기는 형태와 컨트롤러 (SocialSearchController),이 입력을 받고 서비스로 제출 중 및 결과를 표시 돌봐를 렌더링 :

은 다음과 같이 구성 검색 상태가 있습니다. 결과 목록은 사용자에게 순위가 매겨진 목록 (예 : Google의 검색 결과 페이지)으로 표시됩니다. 그것은 social.search의 아이가 아닌 있도록 social.profile 상태, 응용 프로그램의 다른 부분에 사용되는

<a ui-sref="social.profile({personId: person.id})">{{person.name}}</a> 

: 각각의 결과는, 예를 들어, 항목에 대한 자세한 정보를 표시하기 위해 새로운 상태로 갈 수있는 링크가 다음과 같이 구성됩니다.

function config($stateProvider) { 
    $stateProvider.state('social.profile', { 
    url: '/{personId}', 
    templateUrl: 'views/social/profile/social-profile-view.html', 
    controller: 'SocialProfileController', 
    controllerAs: 'vm' 
    }); 
} 

괜찮 으면 검색 결과를 입력 한 다음 항목을 클릭하여 항목에 대한 자세한 정보를 확인할 수 있습니다. 그러나 뒤로 버튼을 눌러 상세보기에서 검색보기로 전환하면 입력 및 검색 결과가 사라집니다. 컨트롤러를 더 이상 사용하지 않으면 컨트롤러를 메모리에 둘 필요가 없으므로 이것이 기본 동작이며 올바른 동작이라는 것을 알고 있습니다.

이 시나리오에서는 제어기가 메모리에 머물러 있기를 원하는데, 사용자는 쿼리를 다시 입력하고 검색 서비스에 대한 다른 요청을 할 필요가 없습니다.

검색 상태를 서비스에 저장하고 컨트롤러가 마지막 컨트롤러의 상태를 저장하는 캐시 서비스와 같은 초기 상태를 잡아낼 수 있다고 생각할 수 있습니다. 그러나이 동기화 프로세스에 관련된 버그에 취약합니다. 자동 완성 및 태그 입력란 (사용자 지정 지시문)이 포함되어 있으므로 검색 양식이 약간 복잡하므로 적어도 세 개의 "레이어"를 통해 동기화가 이루어집니다. : 컨트롤러 상태, 캐시 서비스, 사용자 정의 입력.

올바른 방법입니까? 내 옵션은 무엇입니까?

Answer 1

ui-router가 부모와 자식 사이에 컨트롤러와 데이터를 보관하는지 여부는 확실하지 않지만이 경우 사용자 상태를 "복제"할 수 있습니다. 'social.search' 뷰에서

function config($stateProvider) { 

var socialProfile = { 
    url: '/{personId}', 
    templateUrl: 'views/social/profile/social-profile-view.html', 
    controller: 'SocialProfileController', 
    controllerAs: 'vm' } 

    $stateProvider 
    .state('social.search', { 
     url: '/search', 
     templateUrl: 'views/social/search/social-search-view.html', 
     controller: 'SocialSearchController', 
     controllerAs: 'vm' 
    }); 
    $stateProvider.state("social.search.detail', socialProfile); 
    $stateProvider.state('social.profile', socialProfile); 
    } 

, 당신은 당신의 socialProfile 검색의 하위 상태이 설정에서 특별한 href가

<a ui-sref="social.search.detail({personId: person.id})">{{person.name}}</a> 

을 가지고 있지만 같은 독립 국가로 남아 있었다 잘