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函数的末尾添加了控制台日志,看看它是否卡在了函数的中间,但没有!控制台日志正在发生,但它返回上一页.
我只是拼命地测试东西,但没有运气.
一年来我一直在努力解决这个问题,现在我明白了。这不是角度的工作原理。我应该使用 ngRoute 模块来提供导航。这不是关于推送状态不起作用或其他什么,而是关于角度如何工作。
我不需要$scope.GoToNext或$scope.GoToPrev用于导航,因为角度会自动为我完成。只需更改路线即可完成。一切正常。
| 归档时间: |
|
| 查看次数: |
789 次 |
| 最近记录: |