如何使用AngularJS刷新（F5）并获取另一个页面？

Question

在我的Web应用程序中，我在2个不同的页面上分别有一个表单purchase1和purchase2 。

如果客户在purchase2刷新页面，我希望将位置更改回purchase1 。

我还没有找到一种方法，我试图做这样的配置：

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/purchase2', '/purchase1');
}

但是显然，这样一来，我将永远无法进入purchase2页面。

我需要仅在手动用户刷新时发生。

有什么办法吗？ 刷新时会发生一些内置的Angular函数吗？

就像是

$scope.onRefresh = function(){
   $location.path('/dashboard/purchase1');
}

找不到类似的东西。

Answer 1

您可以监听beforeunload事件。 当有人按下 F5或刷新页面时，将触发beforeunload事件。 做类似的事情，

var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
    event.preventDefault();
    //below is the redirect part.
    $window.location.href = '/purchase1';
});

将此代码放在Purchase2页面上。

Answer 2

是的，您可以做到。

注册全局侦听器以进行状态更改：

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
    // If fromState is null that means it is a page refresh otherwise
    // The fromState will be the purchase1
    if (toState.name == 'purchase2' && !fromState) {
        $state.go('purchase1');
        event.preventDefault();
        return;
    }
});

就全局而言，我的意思是将上述内容注册到这样一个控制器中，该控制器的作用域在整个应用程序中都可用，例如添加到您的body或html标签中的控制器。

另外，我假设purchase1和purchase2是两个页面的州名。 如果它们是通用状态的参数，则可以更改上面的代码。

Answer 3

刷新时发生的情况与第一次加载时发生的情况相同。

您可以做的就是检查用户是否已经来过这里，例如设置cookie并稍后阅读。

但是，我认为您应该重新考虑您的设计。 您为什么要花时间使刷新功能表现更糟？

Answer 4

我认为，javascript不是正确的方法，因为javascript对上一页不了解，因为它将在页面已加载时呈现。 因此，请尝试像在php或jsp中那样在服务器端应用程序中进行检查，并阅读请求标头，因为在那里您可以获得当前url并将用户重定向到新的url。

Answer 5

您可以尝试加载一个标志，例如purchase2-loaded ，并将此变量保留在localStorage 。 然后，您可以编写一个IIFE，这将检查该变量的值，并重新路由到purchase1。

同样在Purchase1中 ，将其重置为false 。

注意： 这是纯JS代码，并依赖于localStorage。

小提琴 。

样例代码

 (function(){ var isPurchase2Loaded = localStorage.getItem("Purchase2"); if(isPurchase2Loaded || isPurchase2Loaded === undefined){ document.write("Rerouting to purchase 1..."); } else{ document.write("Loading for the first Time..."); localStorage.setItem("Purchase2", true); } })() 

Answer 6

最终，如果有人感兴趣，我将其修复为：

在purchase1.js中，我已将其添加到submit（）函数中：

$rootscope.demographic=1;

在purchase2.js中，我将此代码添加到了控制器中：

var init = function(){
      if(angular.isUndefined($rootScope.demographic)){
           $location.path('/purchase1');    
      }

    };
    init();

之所以起作用，是因为Refresh（F5）完全重新启动了应用程序，因此也重置了$ rootscope并使“ Demographic”处于未定义状态。

进入purchase2后，将启动“ init”功能，如果我们来自purchase1，一切正常，将定义人口统计信息，否则我们将再次加载purchase1。

:)

Answer 7

$state.go('purchase1'); 

这应该可以解决您的问题。