ui-routing을 사용한 페이징. 뒤로 (다음) 브라우저 버튼이 컨트롤러를 다시로드하지 않습니다.

Question

먼저 프론트 엔드 개발에 익숙하다고 말하면서 세부적인 답변이 매우 유용합니다. 페이징 문제에 ui-routing을 사용하려고합니다. 사실, url에 쿼리 매개 변수를 추가하려고합니다. 내 코드는 다음과 같습니다.

angular.module('simpleApp', [ 
    'ngAnimate', 
    'ui.router' 
]).config(function ($locationProvider, $stateProvider, $stateProvider, $urlRouterProvider) { 
    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false, 
     rewriteLinks: false 
    });  

$stateProvider.state('productList', { 
    url: '?page', 
    controller: 'productPartialController',   
    params: { 
     page: { 
      value: '1', 
      squash: true 
     } 
    } 
});  

}); 보시다시피 초기화입니다.

angular.module('simpleApp') 
    .controller('productPartialController', ['$scope', 'productService', 'productPartialService', '$compile', '$sce', '$window', '$timeout', '$stateParams', '$state', function ($scope, productService, productPartialService, $compile, $sce, $window, $timeout, $stateParams, $state) { 
    var p = parseInt($stateParams.page); 
    console.log(p); 
    $scope.processQuery = function (page) { 
     if (page) 
      $scope.pagerSettings.CurrentPage = page; 
productPartialService.getFilterPageData({ 
      /*ajax params*/ 
      sortBy: $scope.pagerSettings.SortBy,    
      currentPage: $scope.pagerSettings.CurrentPage, 
     }).success(function (products) { 
      $scope.products = products; 
      processProducts(); 
      calculatePages(); 
      utils.ToTopScroll(); 
      if(page) 
       $state.go('productList', { page: $scope.pagerSettings.CurrentPage }, { notify: false }); 

      console.log($stateParams.page); 
    });  


    };  
}]); 

I (예 helloworldsite.loc/phones/samsung에 대한) 약간의 URL을 non rest 프로젝트 및로드 페이지에 기능을 추가하기 위해 노력하고있어 : 이 컨트롤러 로직의 일부입니다. 페이징 URL을 처리 할 때 예상대로 helloworldsite.loc/phones/samsung?page=4 (if $scope.pagerSettings.CurrentPage is 4), helloworldsite.loc/phones/samsung?page=3 (when $scope.pagerSettings.CurrentPage is 3), etc으로 변경됩니다. 다른 페이지 (이 페이지는 다른 urls - helloworldsite.loc/phones/samsung, helloworldsite.loc/accessories 등)에이 코드를 사용하고 싶습니다. 따라서 이해할 수있는대로 URL은 절대적이어야합니다. 브라우저 버튼 back-next을 클릭하면 문제가 발생합니다. 이 샘플을 사용하려고 시도하는 것이 중요합니다. http://www.codelord.net/2015/06/20/simple-pagination-and-url-params-with-ui-router/ 및 코드 샘플 https://gist.github.com/abyx/f5ef04d807dc15617331이 샘플은 완벽하게 작동합니다. 나는 컨트롤러가 back-next 브라우저 버튼을 클릭 할 때 컨트롤러가 다시로드되지만 컨트롤러는 그렇지 않다는 것을 의미합니다. 또한, 나는 내가 NoN 대신 1받을 inital PARAM (

params: { 
      page: { 
       value: '1', 
       squash: true 
      } 
     } 

)를 얻을 때. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 아무도 날 어떻게 작동해야한다고 설명 할 수 있을까? 나는 설명서의 일부를 읽었으며 일반적으로 ui-routing과 History API에 대해 혼동하고 History API에는 angular.js에 대해 대략 혼동했습니다. 상태가 다시로드하지 않도록

$state.go('productList', { page: $scope.pagerSettings.CurrentPage }, { notify: false });

notify: false이 발사되는 것을 $stateChangeStart 및 $stateChangeSuccess 이벤트를 방지 :

Answer 1

문제는이 라인입니다. notify: false을 제거하면 UI-Router가 기본적으로 창 기록과 함께 작동하므로 뒤로 및 다음 버튼이 예상대로 작동해야합니다.

notify: false은 다른 선택의 여지가없는 한 피해야하는 UI-Router의 반 패턴입니다.

통지 사용 : 거짓이 0.2.x로 인해 "동적 PARAMS"부족 추한 해결 방법 내가 좋은 말씀 드릴 수는 없지만,이 Github에서의 UI - 라우터 테이너에서 직접 견적입니다 방법은 그것을 사용 : 기본적으로 (힌트 내가 을 사용하지 않을 것이라고 자신)

을하는 UI-라우터 상태를 의미 true에 reloadOnSearch 세트를 가지고 그 쿼리 매개 변수 변경은 상태가 자동으로 다시로드됩니다.