2015-12-18 23 views
8

ブラウザで戻るボタンを押して前の状態にすると、デフォルトでコントローラがリロードされているようです。 (これは親子状態の場合は該当しません)角度ui-router:ブラウザの戻るボタンを押すとコントローラがリロードされないようにします

どうしたら起こるのを防ぐことができますか?

私は以前の状態に影響する可能性のある現在の状態のデータを変更しないので、以前の状態を再度読み込まないようにします。 homeabout:2つの状態があります http://plnkr.co/edit/xkQcEywRZVFmavW6eRGq?p=preview

:ここ

は小さなplunkerです。 about状態に戻ってから戻るボタンを押すと、home状態コントローラが再度呼び出されます。

.state('home', { 
    url: '/home', 
    templateUrl: 'partial-home.html', 
    controller: function($scope) { 
     console.log('i was called'); 
    } 
}) 

私は、これは正常な動作であると信じて、私の以前の状態(この場合はhome)が再び作成されるまでに時間がかかるいくつかの視覚化をやっているので、私はそれを防ぎたいです。

答えて

6

<body>または<html>タグ(ng-controller="GlobalCtrlなど)に追加されたGlobalCtrlのようなグローバルコントローラから始めましょう。

これを実行すると、(ui-routerを使用している場合)1ページのAngularアプリ全体でこのGlobalCtrlの範囲を維持できます。 範囲:今

$rootScope.globalData = {preventExecution: false}; 

// This callback will be called everytime you change a page using ui-router state 
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) { 
    $scope.globalData.preventExecution = false; 

    // Just check for your states here 
    if (toState.name == "home" && fromState.name == "about") { 
     $scope.globalData.preventExecution = true; 
    } 
}); 

、あなたの状態の構成では、あなたが質問にこの$scope.globalData.preventExecution;

.state('home', { 
    url: '/home', 
    templateUrl: 'partial-home.html', 
    controller: function($scope) { 
     if ($scope.globalData.preventExecution) { 
      return; 
     } 
     console.log('i was called'); 
    } 
}); 

回答を使用することができます。あなたのGlobalCtrlこのような何かを定義する内部今

、 GlobalCtrlを参照し、State Controllerで使用するスコープをどのように関連づけていますか?

これは非常に良い質問ですが、簡単です。新しいスコープがAngularで作成されるたびに、(スコープが分離されていない限り)常に親スコープを継承します。したがって、あなたのhome状態コントローラーがインスタンス化されると、親状態を使用してそのスコープが作成されます。つまり、ここでは$rootScopeとなります。がオブジェクトです(Objectはネストされたオブジェクトです。したがって、今度はglobalData.preventExecutiontrue/falseと設定すると、同じデータがhome状態コントローラの$scopeで使用できます。これは、両方のスコープが関連しているか、同じデータを使用している方法です。質問

回答:は、いくつかのフラグがあるか、複数の状態のために上記の動作コードを達成したいならば、あなたが書くことができ、一般的な

でこれを達成することができますUI-ルータに設定このような何か:

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) { 
    $scope.globalData.preventExecution = false; 

    if (toState.name == "home" && fromState && fromState.preventHomeReExecution) { 
     $scope.globalData.preventExecution = true; 
    } 
}); 

今、あなたの状態は次のように書くことができます。

.state('about', { 
    url: '/about', 
    templateUrl: 'partial-about.html', 
    preventHomeReExecution: true 
}) 
.state('foo', { 
    url: '/foo', 
    templateUrl: 'partial-foo.html', 
}) 
.state('bar', { 
    url: '/bar', 
    templateUrl: 'partial-bar.html' 
    preventHomeReExecution: true 
}) 

基本的に、私たちはあなたが望むフラグとしてpreventHomeReExecution: trueを使用しています。

+2

この回答は削除されています。 – user3632710

+1

それは働いています。私はGlobalCtrlで参照するスコープとState Controllerで使用するスコープとをどのように関連づけているのか理解できません。同じスコープが状態コントローラにも注入されているか、rootScopeが継承されているためですか? – gaurav5430

+0

また、このコードは非常に特殊なもので、多くの州のやりとりのためにこのようなものを書かなければなりません。これを達成できるui-routerにいくつかのフラグや設定があります。たとえば、状態が何であれ、バックプレスでコントローラーをまったくリロードしないでください。 – gaurav5430

関連する問題