2016-09-18 6 views
0

まず、私はフロントエンド開発では新しいと言う必要があるので、詳細の回答は非常に役に立ちます。私はページング問題のためにui-routingを使用しようとしています。実際には、URLにクエリパラメータを追加したいと思います。これは私のコードです:ui-routingによるページング。戻る(次の)ブラウザボタンがコントローラを再ロードしない

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); 
    });  


    };  
}]); 

私は(たとえば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 /アクセサリーなど)にこのコードを使用したいと言いたいので、私が理解するように、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 
      } 
     } 

)を取得しようとします。私は間違って何をしていますか?誰も私がどのように動作する必要がありますstateを説明することができますか?私はドキュメントの一部を読んで、一般にui-routingHistory APIと約という文脈について実際に混乱しました。状態はリロードすることはありませんように

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

notify: falseは、解雇されてから$stateChangeStart$stateChangeSuccessイベントを防ぐ:

答えて

1

問題は、このラインです。 notify: falseを削除した場合、UIルーターはデフォルトでウィンドウ履歴と共に機能するため、前後のボタンは期待どおりに機能するはずです。

notify: falseは、他に選択肢がない限り避けるべきUI-Routerのアンチパターンです。

通知使い方::偽が0.2.xであるため、「ダイナミック のparams」の欠如の醜い回避策だと私は良いにコメントすることはできませんこれはGithubの上のUI-ルータのメンテナからの直接の引用ですそれを使用する方法:デフォルトでは(ヒント私は はそれを自分自身を使用することはありませんでしょう)

は、UI-ルータの状態が時にクエリパラメータが変化し、状態が自動的にリロードされていることを意味し、truereloadOnSearchセットを持っています。

+0

ありがとう、ライアン、それは助けにはなりません。 {notify:false}が削除され、((( –

関連する問題