ui-routerとmd-tabsを使用してpreventDefault（）を呼び出すと、間違ったタブが選択される

Question

md-tabsを使用した組み込みのルーターからui-routerに移行しようとしています。動作するように構成する。

ユーザーがダーティページからタブを離そうとすると、移動のキャンセルを許可するダイアログが表示されます。私はTAB2を選択し、ダイアログの状態変化を解除した場合、必要に応じて、tab1のテキストは、表示されたまま

$rootScope.$on('$stateChangeStart', 
    function (event, toState, toParams, fromState, fromParams) { 

     console.log(' fromState: '+fromState.name +'; toState: '+toState.name); 

      if (confirm("Would you like to change state?")){ 
       console.log('going to: '+toState.name); 
      } else { 
       console.log('staying at state: '+fromState.name); 
       event.preventDefault(); 
      } 

     }); 

：だから私は、アプリのrun（）メソッドにこのコードを追加しました。ただし、tab2はアクティブに選択されたタブになります。

$state.go(fromState.name)をpreventDefault()の後に呼び出すことに関するいくつかの提案がありましたが、それでも問題は解決しません。

This pageは深いタブで同様の動作を説明し、回避策を提案していますが、コード例にどのように適用するのか分かりませんでした（深いタブでも同じ問題が発生します）。 TAB2のコンテンツを表示するが、再びアクティブなタブをtab1のあるTAB2状態タブ/。

が、私は同じ問題を持っていたこの？

Answer 1

への解決策があります。「NGクリック」ディレクティブを使用して私のために動作するようです'ui-sref'の代わりに '$ state.go'を指定すると、 'md-active'ディレクティブを使用してクリックイベントの伝播を停止し、アクティブ状態を管理する必要があります。

次に、あなたのマークアップは次のようになります。

<md-tabs md-align-tabs="top"> 

<md-tab md-active="$state.includes('tabs.tab1')"> 
    <md-tab-label> 
    <span ng-click="$event.stopPropagation();$state.go('tabs.tab1')">Tab 1</span> 
    </md-tab-label> 
</md-tab> 

<md-tab md-active="$state.includes('tabs.tab2')"> 
    <md-tab-label> 
    <span ng-click="$event.stopPropagation();$state.go('tabs.tab2')">Tab 2</span> 
    </md-tab-label> 
</md-tab> 

ここでそれを確認してください：http://plnkr.co/edit/O2y8Rn1SmuquXTjucrgm