ui-routerの状態履歴を管理する

Question

私の1ページのアプリケーションでは、状態間を行き来するのを簡単にするために状態履歴を保存する必要があります。私は自分のページに使用しているブラウザのボタンを通過していない自分の前方と戻るボタンを持っています。

これは、配列に状態を格納するために作成したサービスを使用する次のコードです。サービスで

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) { 
    StateMgmtService.add(toState, toParams); 
}); 

、私は次の効果に何かを持っている：

var history = []; 

    return { 
     previous: function() { 
      if (history && history.length > 0) { 
       return history[history.length - 1]; 
      } 
     }, 
     add: function (state, params) { 
      var historyItem = { 
       state: state, 
       parameters: params 
      }; 

      history.push(historyItem); 
     } 
    }; 

問題は、私は戻って前の状態に戻り任意の時間は、stateChangeStartは基本的に私を汚染され解雇されていることです歴史。次の例を考える：

• 状態からBに開始 - BはCに履歴
• Bに追加される - CバックBに
• Cを追加します - Bは再び

追加されます

この結果、bからc、bからcへの無限ループが発生します...したがって、基本的には、以前の項目を履歴に追加したり、履歴に戻っていることを何とか知る必要はありませんが、stateChangeStartそのような差別化は認められません。

ヘルプ！

Answer 1

サービスでは、履歴をトラバースするときに呼び出されるgoBackメソッドを追加しました。この関数は、履歴に戻ることを示すフラグを設定します。次に、stateChangeStartイベントが発生して配列に追加されると、サービスは追加する必要がない項目であることを認識し、フラグをリセットして戻ります。それは今のところうまくいきます。

Answer 2

ヒストリ（長さ-2）が現在の状態と等しいことを検証することで解決できます。サービスの このようないくつかのコード、：

add: function(state, params) { 
    var isBackState = function (currentState, listState) { 
    var listStateLength = listState.length; 
    if (listState[listStateLength -2].state === currentState) { 
     return true; 
    } 

    return false; 
    }; 

    if (history.length > 1 && isBackState(state, history) { 
    return; 
    } 

    var historyItem = { 
    state: state, 
    parameters: params 
    }; 

    history.push(historyItem); 
} 

あなただけの現在の状態と以前の状態が等しくない場合historyItemは、あなたは$ stateChangeStart関数スコープの検証を追加することができます歴史の中に押し込みたい場合。

$rootScope.on('$stateChangeStart', function (event, toState, toParams, fromState) { 
    if (toState === fromState) { 
    return; 
    } 
    .... 
}