Javascript Angular ui router：按浏览器中的“后退”按钮，停止控制器重新加载

默认情况下，当您按下浏览器中的“后退”按钮以转到上一状态时，上一状态的控制器似乎会重新加载。 （对于父子状态，情况并非如此）

我怎样才能防止这种情况发生

由于我不打算更改当前状态中可能影响前一状态的任何数据，因此我不希望再次重新加载前一状态

这是一个小插曲：

有两种状态：

home

和

about

。如果您转到

关于

状态，然后按后退按钮，您将看到再次调用

主

状态控制器

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

---

我相信这是预期的行为，但我想阻止它，因为我以前的状态（

home

在本例中）正在执行一些可视化操作，这些操作需要一些时间才能再次创建。

让我们从一个全局控制器开始，例如添加到

或

标记中的

ng controller=“GlobalCtrl

这样做将使我们能够在整个单页Angular应用程序中保持此

GlobalCtrl

的范围（因为您正在使用ui路由器）

现在，在您的

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;
    }
});

$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
})

现在，在您的状态配置中，您可以使用这个

$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 controller中使用的范围，它们之间有何关联？

好的，这是一个很好的问题，但很简单。每次在Angular中创建一个新的作用域时，它总是继承其父作用域（除非隔离）。因此，当您的

主

状态控制器实例化时，它的作用域是使用父状态创建的，即本例中的

$rootScope

，我们正在实例化

$rootScope

中的

全局数据

，它是一个对象（Javascript中的

对象

可以用于它的任何嵌套对象）。因此，现在当我们设置

全局数据.preventExecution

真/假

时，相同的数据可以在您的

主

状态控制器的

$scope

中使用。这就是两个作用域之间的关系或使用相同数据的方式

问题的答案：ui路由器中是否有一些标志或设置通常可以实现这一点

如果要实现上述多个状态的行为代码，可以编写如下代码：

$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;
    }
});

$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
})

现在，您的状态可以这样写：

$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;
    }
});

$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
})

---

基本上，我们正在使用

preventHomeExecution:true

作为您想要的标志。

删除了我的答案，因为这个答案更详细。它正在工作。但是，我无法理解一件事，我们在GlobalCtrl中引用的范围和我们在状态控制器中使用的范围，它们之间有什么关系？似乎是同一个范围是否也被注入到状态控制器中，或者是因为继承了根作用域？此外，这段代码非常特殊，我必须为许多状态交互编写类似的代码，ui路由器中是否有一些标志或设置可以实现这一点。例如，根本不在反压时重新加载控制器，等等呃是美国。