最初に状態をクリックすると、「ui-view」属性を所有するdivがその状態の「テンプレート」に置き換えられます。ただし、同じ状態をもう一度クリックすると、そのコントローラーはリロードされません。このコントローラーを再度ロードするにはどうすればよいですか?
たとえば、次のナビゲーションメニューがあるとします。
<nav>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</nav>
私の「ui-view」コンテンツは次のとおりです。
<div ui-view></div>
私の状態は以下のとおりです。ナビゲーションメニューの[State1]をクリックすると、"Ctrl 1 loaded"
のテキストdeveloper console
が表示されるはずです。初めての場合は、そのテキストを観察します。ただし、同じリンクを再度クリックしても、コントローラーが再度読み込まれず、コンソールに"Ctrl 1 loaded"
というテキストが2回表示されることはありません。
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("state1", {
url: "#",
template: "<p>State 1</p>",
controller: "Ctrl1"
}).state("state2", {
url: "#",
template: "<p>State 2</p>",
controller: "Ctrl2"
});
});
どうして?何かアイデアはありますか?
これはJSFiddleです この質問の。
Philippが言ったように、これはui-routerのデフォルトの動作です。しかし、リンクをクリックするたびにコントローラーをリロードしたい場合は、実際にui- sref-opts属性は、次のように強制します:
<a ui-sref="state1" ui-sref-opts="{reload: true}">State 1</a>
ここでこのヒントを見つけました:
https://github.com/angular-ui/ui-router/commit/91a568454cc600aa4f34dedc8a80c9be1130b1c5
それが役立つことを願っています
別のビューに移動する代替構文
<a ui-sref="state1({reload: true})">State 1</a>
コントローラー上では次のようになります。
$state.go('state1', {}, {reload: true});
注:$ state.goの2番目のパラメーターは$ stateParamsです。
それがUIルーターの設計方法だからです。
コントローラーは、同じ状態でない場合にのみロードされます。 ui-routerはコントローラーを再実行せず、ビューテンプレートを再評価しません。複数の状態で同じコントローラーを使用し、それらの状態を切り替えても、コントローラーは再実行されません。
ビューが変更されたときに機能を実行する場合は、 イベントをリッスン にするか、a
要素にng-click
を追加します。
以下のコードを使用してください
$stateProvider.
state('myPage', {
url: '/',
cache: false // add this line