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