history.pushState在控制器中不起作用

M.R*_*ari 6 pushstate angularjs html5-history

我的html中有两个按钮:

<a href="" class="sbtn sbtn-default" ng-click="GoToNext()"><i class="fa fa-angle-right"></i> Next </a>
<a href="" class="sbtn sbtn-default" ng-click="GoToPrev()"> Prev <i class="fa fa-angle-left"></i></a>
Run Code Online (Sandbox Code Playgroud)

然后在我的控制器中:

$scope.GoToNext = function () {
    var nextPage = getNextPage("next");

    history.pushState(null, "Site Title", nextPage);
    getQuestion();
}

$scope.GoToPrev = function () {
    var prevPage = getNextPage("prev");

    history.pushState(null, "Site Title", prevPage);
    getQuestion();
}
Run Code Online (Sandbox Code Playgroud)

和getNextPage函数是:

function getNextPage(type) {

    var querystr = window.location.pathname.split('/')[4];
    var currentQuestion = querystr.split("-")[1];
    var currentBook = querystr.split("-")[0];

    switch (type) {
        case "next":
            return ((currentBook + "-") + (+currentQuestion + +1));

        case "prev":
            if (currentQuestion == 1)
                return (currentBook + "-1");

            return ((currentBook + "-") + (+currentQuestion - +1));

    }

};
Run Code Online (Sandbox Code Playgroud)

我的网址看起来像这样:

HTTP://本地主机:14799 /应用/控制面板/问题/ 1-330

getQuestion函数只是从服务器获取数据,我已经测试了它并且它没有问题地返回数据,实际上它在页面加载时返回数据没有问题.

我正在尝试做的是更改URL并通过单击这些按钮获取下一个或上一个问题.但是发生的事情是调用getQuestion函数但URL没有改变.如果我非常仔细地查看URL并注意它会得到改变,并且非常快速地回到上一页,只需一瞬间!

我的代码中没有任何内容可以返回上一页.

我尝试的是在getNextPage函数中添加console.log以查看它是否调用了两次,但它没有,它只是为每次点击调用一次.

如果我尝试在控制台中pushState,它的工作原理!

我还在我的getQuestion函数的末尾添加了控制台日志,看看它是否卡在了函数的中间,但没有!控制台日志正在发生,但它返回上一页.

我只是拼命地测试东西,但没有运气.

M.R*_*ari 1

一年来我一直在努力解决这个问题,现在我明白了。这不是角度的工作原理。我应该使用 ngRoute 模块来提供导航。这不是关于推送状态不起作用或其他什么,而是关于角度如何工作。

我不需要$scope.GoToNext$scope.GoToPrev用于导航,因为角度会自动为我完成。只需更改路线即可完成。一切正常。