web-dev-qa-db-ja.com

リンクが2回クリックされた場合、「ui-sref」は「ui-view」を更新しません(コントローラーは再実行されません)

最初に状態をクリックすると、「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です この質問の。

25
ankakusu

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

それが役立つことを願っています

85
schankam

別のビューに移動する代替構文

<a ui-sref="state1({reload: true})">State 1</a>

コントローラー上では次のようになります。

$state.go('state1', {}, {reload: true});

注:$ state.goの2番目のパラメーターは$ stateParamsです。

12
Rick

それがUIルーターの設計方法だからです。

コントローラーは、同じ状態でない場合にのみロードされます。 ui-routerはコントローラーを再実行せず、ビューテンプレートを再評価しません。複数の状態で同じコントローラーを使用し、それらの状態を切り替えても、コントローラーは再実行されません。

ビューが変更されたときに機能を実行する場合は、 イベントをリッスン にするか、a要素にng-clickを追加します。

3
Philipp Gayret

以下のコードを使用してください

$stateProvider.
  state('myPage', {
    url: '/',
    cache: false // add this line
1
Ravi Rajindu