我有一个令人沮丧的早晨.
原文链接：https://www.f2er.com/angularjs/142194.html我有一个具有基本位置的应用程序,因此在头部是< base href =“/ my / path / fruits / index.html”/>.我正在尝试通过函数nextPage()设置分页.当我点击触发nextPage()的链接时,我使用$location.path(‘/ page /：page’).
预期行为：浏览器位置网址应更改为http：// localhost / my / path / fruits / page / 2.
实际行为：浏览器URL(非常简短地)更改为http：// localhost / my / path / fruits / page / 2,然后恢复为http：// localhost / my / path / fruits /.
注意：如果我没有使用基本位置,则似乎不会发生此行为.但是,我需要使用基本位置,因为应用程序位于服务器的子/子/子目录中.
另外：如果我设置$locationProvider.html5Mode(false),则不会发生此行为.
难道我做错了什么？这是Angular中的错误吗？任何帮助是极大的赞赏.
这是适当的文件.
index.html的：
<!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>
的script.js：
angular.module('fruits',[],function($routeProvider,$locationProvider) {
$routeProvider
.when('/',{
templateUrl: 'fruits.html',controller: FruitCntl,})
.when('/page/:page',})
.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',{name: 'Raspberries',{name: 'Clementines',{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;
}
}
fruits.html(视图)
Page: <a ng-click="prevIoUsPage()" ng-show="current_page > 1">PrevIoUs</a> {{current_page}} of {{total_pages}} <a ng-click="nextPage()" ng-show="current_page < total_pages">Next</a> <div ng-repeat="fruit in fruits | startFrom:(current_page - 1)*per_page | limitTo:per_page"> {{fruit.name}} are {{fruit.color}}<br/> </div>
