Angular ui-router：按下瀏覽器中的后退按鈕，停止控制器重新加載

Question

默認情況下，當您按下瀏覽器中的后退按鈕以轉到先前狀態時，似乎會重新加載先前狀態的控制器。 （在親子國家的情況下不是這樣）

我怎樣才能防止這種情況發生？

由於我不會更改當前狀態中可能影響先前狀態的任何數據，因此我不希望先前的狀態再次重新加載。

這是一個小型的plunker： http ：//plnkr.co/edit/xkQcEywRZVFmavW6eRGq？p = preview

有兩種狀態： home about 。 如果你轉到about狀態，然后按回按鈕，你會看到再次調用home狀態控制器。

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

我相信這是預期的行為，但我想阻止它，因為我之前的狀態（在這種情況下是home ）正在做一些可視化，需要一些時間再次創建。

Answer 1

讓我們從像GlobalCtrl這樣的全局控制器開始，它被添加到<body>或<html>標簽中，如ng-controller="GlobalCtrl 。

這樣做將使我們能夠在整個單頁Angular應用程序中保持此GlobalCtrl的范圍（因為您使用的是ui-router）。

現在，在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中引用的范圍以及我們在State控制器中使用的范圍，它們是如何相關的？

嗯，這是一個非常好的問題，但它很簡單。 每次在Angular中創建新范圍時，它總是繼承其父范圍（除非隔離）。 所以，當你的home狀態控制器實例化，其范圍使用父狀態即創建$rootScope在這種情況下，在這里，我們實例化的globalData在$rootScope這是一個對象（一個Object在Javascript可用於它的任何嵌套對象。閱讀這個）。 所以現在當我們將globalData.preventExecution設置為true/false ，可以在home狀態控制器的$scope中使用相同的數據。 這是兩個范圍相關或使用相同數據的方式。

回答問題 ： ui-router中是否有一些標志或設置可以實現這一點

如果您想為多個狀態實現上述行為代碼，那么您可以編寫如下內容：

$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作為你想要的標志。

Angular ui-router：按下瀏覽器中的后退按鈕，停止控制器重新加載

問題描述

1 個解決方案

解決方案1
6 已采納 2015-12-18 11:31:05

Angular ui-router：按下瀏覽器中的后退按鈕，停止控制器重新加載

問題描述

1 個解決方案

解決方案1 6 已采納 2015-12-18 11:31:05

解決方案1
6 已采納 2015-12-18 11:31:05