routing – AngularJS location.path()简要更改URL,然后恢复

发布时间：2020-12-17 07:30:13 所属栏目：安全来源：网络整理

导读：我有一个令人沮丧的早晨. 我有一个具有基本位置的应用程序,因此在头部是 base href =“/ my / path / fruits / index.html”/.我正在尝试通过函数nextPage()设置分页.当我点击触发nextPage()的链接时,我使用$location.path(‘/ page /：page’). 预期行为：

我有一个令人沮丧的早晨.

我有一个具有基本位置的应用程序,因此在头部是< 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>

我有同样的问题,不能为我的生活弄清楚出了什么问题. 对我有用的是更改锚标签,该标签将ng-click事件附加到按钮标签上.从我可以收集的内容中,当没有给出href属性来阻止默认操作时,Angular会修改锚标记的行为,因此如果您在ng-click事件处理程序中手动更新位置,这可能会产生干扰.这只是我的猜测,所以希望有人能够更好地解释.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!