ui-router onEnterフックが複数回起動されました

Question

私のアプリケーションをui-router 1.0.0に移行しています。この問題はネストされた状態で、onEnter $ transitionは何度も何度もフックしますつまり、フックの状態をフィルタリングするかどうかにかかわらず、どれくらい深く入れ子になっているか）。これは期待されているのかバグですか？

$stateProvider 
    .state("root", { 
    url: "/" 
    }) 
    .state("root.child", { 
    url: "/child" 
    }) 
    .state("root.child.child", { 
    url: "/child", 
     data: { 
     foo: "bar" 
    } 
    }); 


$transitions.onEnter(
    {to: state => state.data && state.data.foo === "bar"}, 
    transition => 
    console.log(`on enter triggered`, transition.from(), transition.to()) 
); 

$state.go("root.child.child"); 

この例では、フックが3回発射されます。

ここにはfiddleがあります。

Answer 1

私はgithubで同じ質問で問題を作成しました。そして、ui-routerのトップ寄稿者であるchristopherthielenが私にこの質問に対する包括的な答えを与えました。問題。

---

これは、フックをどのようにコード化したかに基づいています。 onEnterフックは状態ベースです。 root、root.child、root.child.child：最初はroot.child.childに行くとき

入力されている3つの状態があります。次のように処理onEnterのための擬似コードです。

お客様の条件は{ to: state => state.data && state.data.foo === "bar" }です。は、入力された3つの州のそれぞれに一致します。これは、3つの状態が入力されているにもかかわらず、1つの「状態」にはroot.child.childしかありません。その州のデータにはfoo: 'bar'のデータがあるため、一致します。

toの代わりにenteringを使用するように条件を変更する必要があります。

{ entering: state => state.data && state.data.foo === 'bar' } 

ここで更新フィドルです：働くかもしれないhttps://jsfiddle.net/2m63pvqb/1/

他のいくつかのアプローチ：

は、任意の状態がいる場合はONCEの移行につき何かをする状態自体

.state("root.child.child", { 
    url: "/child", 
     data: { 
     foo: "bar" 
    }, 
    onEnter: ($transition$, $state$) => do sommething specific when entering root.child.child 
    }); 

にonEnterを置くが、入力したdata.foo === 'bar'

$transitions.onStart({ entering: state => state.data && state.data.foo === 'bar' }, trans => 
     // do something 

Answer 2

Enterボタンが押されたかどうかを確認するには、app.jsを使用します。実行領域に$rootScope.hitEnter = function(){ });のような関数を挿入することができます。それは設定領域でうまくいくはずです。