Angular ui-router를 사용하여 상태 변경 없이 URL 쿼리 매개 변수 설정

Angular ui-router를 사용하여 상태 변경 없이 URL 쿼리 매개 변수 설정

Angular를 사용하여 변경되는 쿼리 매개 변수로 주소 표시줄 URL을 업데이트하려면 어떻게 해야 합니까?페이지를 새로 고칠 때 상태를 유지하는 JS의 UI 라우터를 선택하십시오.

현재 사용하고 있습니다.$state.transitionTo('search', {q: 'updated search term'})입력이 변경될 때마다 문제는 컨트롤러가 새로고침되고 창이 다시 그려지며 텍스트 입력 포커스가 손실된다는 것입니다.

stateParams를 업데이트하여 창 URL과 동기화하는 방법이 있습니까?

.transitionTo 에서는 문제가 있었습니다만, ui-router 0.2.14 로 갱신할 때까지, 다음과 같은 콜을 사용해 (컨트롤러를 새로고침하지 않고) 로케이션바를 적절히 변경합니다.

$state.transitionTo('search', {q: 'updated search term'}, { notify: false });

edit: 오늘 이 문제를 좀 더 다루어 보니 angular ui-router에 네이티브 router Provider와 같은 옵션인 "reload On Search"가 있다는 것을 알게 되었습니다.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#options-1

로 설정되어 있습니다.true디폴트로는, 다만, 로 설정하면false상태에서는 쿼리 매개 변수가 변경되어도 상태 변경이 발생하지 않습니다.그 후 전화하시면 됩니다.$location.search(params);또는$location.search('param', value);URL은 변경되지만 UI 라우터는 컨트롤러/뷰 전체를 재구축하지 않습니다.그리고 아마 여러분들도 들으셔야 할 것 같습니다.$locationChangeStart루트 범위에서 이벤트를 실행하여 앱 내에서 기록 작업을 주고받거나 전달해도 상태가 변경되지 않습니다.

저도 듣고 있어요.$stateChangeSuccess컨트롤러의 스코프에서 이벤트를 실행하여 페이지/루트의 초기 로드를 캡처합니다.

경로 변경(URL 변경뿐 아니라)에 이 기능을 사용하기 위한 github에 대한 논의가 있습니다.https://github.com/angular-ui/ui-router/issues/125 하지만 사용 사례는 쿼리 문자열 파라미터에 한정되어 있기 때문에 테스트하지 않았습니다.

이전 버전의 답변에서는 다음과 같은 github 문제가 언급되었습니다.

https://github.com/angular-ui/ui-router/issues/562

그러나 이는 약간 별개의 문제이며, 특히 비모달 상태의 변화 없이 다른 상태의 모달(modal)을 보여줍니다.이 호에서 패치를 사용해 보았습니다만, URL 변경시에 상태 전체가 새로고침 되는 것을 막기 위한 것은 아닌 것이 분명합니다.

2015년 5월 19일 갱신

ui-router 0.2.15 현재 쿼리 파라미터 변경 시 상태를 새로고침하는 문제는 해결되었습니다.단, 새로운 업데이트에서는 쿼리 파라미터에 의한 이력 API의 백 및 포워드 기능이 해제되었습니다.저는 그것에 대한 해결책을 찾지 못했습니다.

원래의

제이의 대답은 나에게 효과가 없었고, 다른 대답들도 마찬가지였다.「 」를 재생하려고 .$locationChangeStart 갔다 할때그에, 가 변경되었을 와, 또 의 경우는, 「New State」라고 하는 이유로 실행할 수 되었습니다.그 때문에 코드를 두 번 실행할 수 있습니다.한 번은 새로운 상태가 변경되었을 때, 또 다른 하나는 다음 이유는$loationChangeStart

는 는는그용사 i를 사용해 보았다.reloadOnSearch=false단, 이로 인해 URL 경로가 변경되어도 상태 변경이 방지되었습니다.그래서 저는 다음과 같은 방법으로 그것을 작동시켰습니다.

★★★★★★★★★★를 변경할 때$location.search()쿼리 매개 변수를 업데이트하려면 "syslog"를 사용하여 검색 시 새로고침을 일시적으로 비활성화하고 쿼리 매개 변수를 설정한 다음 다시 새로고침을 사용하도록 설정합니다.

$state.current.reloadOnSearch = false;

$location.search('query', [1,2]);

$timeout(function () {
  $state.current.reloadOnSearch = undefined;
});

그러면 쿼리 파라미터 변경으로 상태가 새로고침되지 않고 URL 경로 변경으로 상태가 올바르게 새로고침됩니다.

일 때 의 이력은 되었을 때 필요). 저는 각.url국가의 재산

$locationProvider.html5Mode(true);

$stateProvider
  .state('home', {
    url: '/?param1&param2&param3',
    templateUrl: 'home.html',
    controller: 'homeCtrl as home',
  });

URL 상의 파라미터명은 이 방법으로 리스트 되어 있는 경우는 임의입니다만, 이러한 파라미터명을 변경하면 브라우저의 [뒤로]버튼과 [앞으로]버튼을 누를 때 상태가 새로고침 됩니다.

다른 사람들이 이 방법을 유용하게 여기고, 저처럼 며칠이 걸리지 않기를 바랍니다.

언급URL : https://stackoverflow.com/questions/20884551/set-url-query-parameters-without-state-change-using-angular-ui-router