Routing AngularJS location.path（）短暂更改URL，然后恢复
我今天早上很沮丧 我有一个应用程序有一个基本位置，所以在头部是Routing AngularJS location.path（）短暂更改URL，然后恢复,routing,pagination,angularjs,Routing,Pagination,Angularjs,我今天早上很沮丧 我有一个应用程序有一个基本位置，所以在头部是。我正试图通过函数nextPage（）设置分页。当我点击触发nextPage（）的链接时，我使用$location.path（'/page/：page'） 预期行为：浏览器位置url应更改为http://localhost/my/path/fruits/page/2 实际行为：浏览器URL（非常短暂）更改为http://localhost/my/path/fruits/page/2然后返回到http://localhost/my/pa
nextPage（）nextPage（）$location.path（'/page/：page'）http://localhost/my/path/fruits/page/2http://localhost/my/path/fruits/page/2http://localhost/my/path/fruits/$locationProvider.html5Mode（false）<!doctype html>
<html ng-app="fruits">
<head>
<base href="/my/path/fruits/index.html" />
<script src="angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainCntl">
<div ng-view></div>
</div>
</body>
</html>
angular.module('fruits', [], function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'fruits.html',
controller: FruitCntl,
})
.when('/page/:page', {
templateUrl: 'fruits.html',
controller: FruitCntl,
})
.otherwise({redirectTo:'/'})
;
// configure html5
$locationProvider.html5Mode(true).hashPrefix('!');
}).filter('startFrom', function()
{
return function(input, start)
{
start = +start; //parse to int
if (input == undefined){
input = [];
}
return input.slice(start);
}
})
;
function MainCntl($scope,$location){
angular.extend($scope,{
current_page: 1,
per_page: 3,
fruits: [
{name: 'Apples', color: 'red'},
{name: 'Bananas', color: 'yellow'},
{name: 'Oranges', color: 'orange'},
{name: 'Grapes', color: 'purple'},
{name: 'Blueberries', color: 'blue'},
{name: 'Strawberries', color: 'red'},
{name: 'Raspberries', color: 'red'},
{name: 'Clementines', color: 'orange'},
{name: 'Pears', color: 'green'},
{name: 'Mangoes', color: 'orange'}
],
nextPage: function(){
this.current_page++;
$location.path('/page/'+this.current_page);
},
previousPage: function(){
this.current_page--;
$location.path('/page/'+this.current_page);
}
})
$scope.total_pages = Math.ceil($scope.fruits.length / $scope.per_page);
}
function FruitCntl($scope,$location,$routeParams){
if ($routeParams.page != undefined){
$scope.current_page = $routeParams.page;
}
}
Page:Next{{total{u pages}中的前一个{current{u Page}}
{{fruit.name}}是{{fruit.color}}
$routeProvider
.when('/', {
templateUrl: 'fruits.html',
controller: FruitCntl,
reloadOnSearch: false
})
.otherwise({redirectTo:'/'})
注意：我不得不删除$locationProvider.html5Mode（true）.hashPrefix（“！”）；当我在本地运行它时，它会破坏网站。我也有同样的问题，我一辈子都无法找出哪里出了问题。
对我有效的是更改锚定标记，它将ng click事件附加到按钮标记上。从我所能收集到的信息来看，Angular修改了锚定标记的行为（当没有提供href属性以防止默认操作时），因此如果您在ng click事件处理程序中手动更新位置，这可能会产生干扰。不过这只是我的猜测，所以希望有人能够更好地解释。浏览器的回滚正在发生，因为url更改发生了两次，一次是在ng click函数触发时，另一次是在a标记的默认浏览器行为发生时 这就是为什么您在url/视图中看到更新，然后它返回到原始状态 这种情况之所以发生，是因为浏览器知道它应该这样做 可能的解决方案： 按钮解决方案 正如您在触发ng单击按钮之前所建议的，这是有效的，因为该按钮没有更新url的有意义的href属性。您可以向按钮添加href，但它不会做任何事情 标签： 不要在ng中进行更新，而是单击避免使用函数，并让href执行更改url的逻辑。这是一个更干净的解决方案，因为您允许浏览器执行标记更新url的默认行为 我认为这样做的好处是，任何人都可以一目了然地理解url shceme，因此代码更易于维护
<a href="#/go/to/logic/5">Update to logic 5</a>
<a href=”http://stackoverflow.com/” ignore-click=”ignore-click” ng-click=”whatever()”>Don't Go</a>
视图%3Ditem123$location.path（'/view'+item.name）<a href="#/go/to/logic/5">Update to logic 5</a>
angularModule.directive('ignoreClick', function() {
return {
restrict: 'A',
link: function(scope, element) {
element.bind('click', function(event) {
event.preventDefault();
});
}
}
});
<a href=”http://stackoverflow.com/” ignore-click=”ignore-click” ng-click=”whatever()”>Don't Go</a>