DOMの後に取り込まれたテンプレートのUI-Routerフック

Question

テンプレートを取得してdomに接続した後に同期コードを実行する必要があるレガシーモジュールをサポートする必要があります。

カスタムルータからUI-Routerに移行しています。ルートが正常に解決され、テンプレートが正しくフェッチされます。しかし、私は、テンプレートがロードされた後に私がフックできる移行を見つけることができないようです。

詳細：

• UI-ルータ：1.0.0-rc.1
• 角度：1.5.8

私はチェーン解決promiseを返すonSuccesshookを試してみましたthenコールバック。これはトランジションライフサイクル内にありますが、テンプレートはDOMにアタッチ/挿入されていません。状態定義の解決ブロックを使用する場合も同じことが言えます。

onSuccessの後にタイムアウトを実行しています。これは明らかに機能しますが、解決策ではありません。

私はredux-ui-routerを持っていますので、onSuccessが呼び出されたときにサンクをディスパッチできますが、それは古いモジュールのために余分なリファクタリングを必要とします。

ご意見やご感想をお寄せください。

ありがとうございます！

Answer 1

あなたは正しいトラックにonSuccessを持っています。 onSuccessフックは、状態マシンの正常な遷移に応答してと呼ばれます。 UI-Router itself synchronizes the views using an onSuccess hookのデフォルト優先度は0です。ビューが同期されると、テンプレートがコンパイルされ、DOMに追加されます。

少し低い優先度のonSuccessフックを登録すると、ビュー同期フックが完了した後にフックが呼び出されます。 を演出テンプレートをAngularJS

app.run(function($transitions) { 
    $transitions.onSuccess({}, yourhook, { priority: -1 }) 
}); 

注ので、ダイジェストループの本質的に非同期です。ここで

---

は、両方のポイントを示していplunkerです：

• フックはdebugger前後のビューは、テンプレート変数補間がダイジェストまで完了しない

• を同期化されていますサイクルが完了しました

http://plnkr.co/edit/OpKexobSQ6WTrP87k4Tb?p=preview

Answer 2

Chris T Answerは、1つのテンプレートフェッチの方が良い解決策ですが、複数をフェッチする必要がありました。私たちは解決ブロックを活用し終えました。

resolve: { 
      templates: ['$q', '$templateRequest', function ($q, $templateRequest) { 
        return $q.all([ 
         $templateRequest('../template1.html'), 
         $templateRequest('../template.html') 
        ]); 
       }] 
     }, 

そして、約束の解像度で成功すると、initが成功します。