当使用浏览器的后退没有更新的角度$位置 [英] Angular $location not updating when browser back is used

问题描述

有没有人碰到这个问题上运行？没有关于它更提到，而其他职位的性质不同。这似乎是不一致的W¯¯有关浏览器的行为/文档。

  

同步的网址与浏览器，当用户

  
  

  
• 更改地址栏。

  
• 单击后退或前进按钮（或单击某个历史记录链接）。

  
• 点击一个链接。

  

  
  

https://docs.angularjs.org/api/ng/service/ $＃位置！

会发生什么：

• 加载页面 - 哈希更新（的 HTTP：//本地主机：9000 /＃/ ）


• 单击开始 - 更新$位置$$路径通过功能更新哈希并加载新的视图（ HTTP： //本地主机：9000 /＃/指南）


• 整蛊！用户点击浏览器后退按钮，哈希更新回到的http：//本地主机：9000 /＃/ 但调试告诉我，$位置$$路径仍然认为我们是在$位置$$路径= /指南 - 。逻辑基于位置的道路行不通
。

这是一个观察者对位置，以帮助调试：

  //监听在相关范围$事件
$ rootScope。在$（'locationChange'，函数（事件数据）{
    的console.log（数据）;
}）;//调用locationChange看随时在页面加载
。$ $范围发出（'locationChange'，$位置$$路径。）;
 

下面的路由：

  $ routeProvider
    。当（'/指南'，{
        templateUrl：意见/ guide.html'，
        控制器：'GuideController'，
        controllerAs：引导
    }）
    。什么时候（'/'， {
        templateUrl：意见/ about.html'，
        控制器：'AboutCtrl'，
        controllerAs：关于
    }）
    。除此以外（{
        redirectTo：'/'
    }）;
 

解决方案

如何解决这样的：

  VAR流行= 0;window.onpopstate =函数（事件）{
    如果（document.location.pathname ==='/'和;＆放大器;弹出→1）{
        流行= 0;
        document.location =的http：//本地主机：9000 /';
    }
    流行++;
};
 

Has anyone run across this behaviour? There isn't much mentioned about it, and the other posts are different in nature. This appears to be inconsistent w/ documentation about browser behaviour.

Synchronizes the URL with the browser when the user

• Changes the address bar.
• Clicks the back or forward button (or clicks a History link).
• Clicks on a link.

https://docs.angularjs.org/api/ng/service/$location#!

What happens:

• Load page - hash updates (http://localhost:9000/#/)
• Click 'Start' - update $location.$$path via function to update hash and load new view (http://localhost:9000/#/guide)
• Tricky! User clicks back-button in browser, hash updates back to http://localhost:9000/#/ but debug tells me $location.$$path still thinks we are at $location.$$path = /guide - logic based on location path doesn't work.

This is a watcher to on location to help debug:

// listen for the event in the relevant $scope
$rootScope.$on('locationChange', function (event, data) {
    console.log(data);
});

//Call locationChange watch at anytime the page is loaded 
$scope.$emit('locationChange', $location.$$path);

Here's the routing:

$routeProvider
    .when('/guide', {
        templateUrl: 'views/guide.html',
        controller: 'GuideController',
        controllerAs: 'guide'
    })
    .when('/', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
    })
    .otherwise({
        redirectTo: '/'
    });

解决方案

How I solved this:

var pop = 0;

window.onpopstate = function(event) {
    if (document.location.pathname === '/' && pop > 1) {
        pop = 0;
        document.location = 'http://localhost:9000/';
    }
    pop++;
};

这篇关于当使用浏览器的后退没有更新的角度$位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！