다시로드하지 않고 stateParams를 변경하십시오.

Question

각도 ui 라우터를 사용하여 앱을 만들고 있습니다.

항상 매개 변수가 전달되는 특정 상태로 이동할 때보기를 다시로드하지 않고 URL을 변경하고 매개 변수를 업데이트 할 수 있어야합니다. 내 상태 설정에서

내가 사용하고 있습니다 : reloadOnSearch :

false이 작동하고 페이지를 다시로드하지 않고 URL의 매개 변수를 업데이트 할 날 수 있습니다.

그러나 $ stateParams에서 이러한 변경 사항을 통지 받아야 새 데이터로 작업 할 다양한 방법을 실행할 수 있습니다.

제안 사항?

감사합니다. James

Answer 1

이것은 약간의 작업을 수행했기 때문에 관련이 있습니다.

여기는 reloadOnSearch을 사용하지만 URL이 업데이트 될 때마다 기능이 중지되는 내 상태입니다. 콘솔

 .state('route2.list', { 
      url: "/list/:listId", 
      templateUrl: "route2.list.html", 
      reloadOnSearch: false, 
      controller: function($scope, $stateParams){ 
      console.log($stateParams); 
      $scope.listId = $stateParams.listId; 
      $scope.things = ["A", "Set", "Of", "Things"]; 
      //This will fire off every time you update the URL. 
      $scope.$on('$locationChangeSuccess', function(event) { 
       $scope.listId = 22; 
       console.log("Update"); 
       console.log($location.url()); 
       console.log($stateParams);  
       }); 
      } 
     } 

반환 : 당신이 가고 싶은 곳

Update 
/route2/list/7 (index):70 
Object {listId: "8"} (index):71 

$locationChangeStart 및 $locationChangeSuccess 당신을 얻어야한다. 첫 번째로드에서도 위치 기능은 항상 꺼집니다.

감흥 ngRoute위한 각 문서에 따르면 SO 게시 this에서 촬영하고 $locationdocumentation

EDIT 2 , $routeParams이 아닌 변경의 성공 이후까지 갱신된다. ui-route에는 비슷한 제한이있을 가능성이 있습니다. 우리가 국가의 결의를 방해하기 때문에 $stateParams은 절대로 업데이트되지 않습니다. 당신이 할 수있는 일은 을 사용하여 처음에 $stateParams이 어떻게 전달되는지 에뮬레이트하는 것입니다. 그래서 같이

: 그건 좋은 일이 그래서

 .state('route2.list', { 
      url: "/list/:listId", 
      templateUrl: "route2.list.html", 
      reloadOnSearch: false, 
      controller: function($scope, $stateParams, $state, $urlMatcherFactory){ 
      console.log($stateParams.listId + " :: " + $location.url()); 
      $scope.listId = $stateParams.listId; 
      $scope.things = ["A", "Set", "Of", "Things"]; 
      $scope.$on('$locationChangeSuccess', function(event) { 
       $scope.listId = 22; 
       //For when you want to dynamically assign arguments for .compile 
       console.log($state.get($state.current).url); //returns /list/:listId 
       //plain text for the argument for clarity 
       var urlMatcher = $urlMatcherFactory.compile("/route2/list/:listId"); 
       //below returns Object {listId: "11" when url is "/list/11"} 
       console.log(urlMatcher.exec($location.url())); 
       var matched = urlMatcher.exec($location.url()); 
       //this line will be wrong unless we set $stateParams = matched 
       console.log("Update " + $stateParams.listId); 
       console.log($location.url()); 
       //properly updates scope. 
       $scope.listId = matched.listId; 
       }); 
      } 
     }) 

실제로 범위 업데이트. 기억해야 할 점은 당신이 모든 것을 정상적으로 해결하지만, reloadOnSearch을 false으로 설정하면 거의 모든 것을 스스로 처리해야한다는 것입니다.

Answer 2

로마서 코드에 이어, 나는 현재 상태

/** 
* Get parameters from URL and return them as an object like in ui-router 
*/ 
eventaApp.service('getStateParams', ['$urlMatcherFactory', '$location', '$state', function( $urlMatcherFactory, $location, $state){ 
    return function() { 

    var urlMatcher = $urlMatcherFactory.compile($state.current.url); 
    return urlMatcher.exec($location.url()); 

    } 

}]);