History.pushState does not work in the controller

Question

I have two buttons in my 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> 

then in my controller:

 $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(); } 

and getNextPage function:

 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)); } }; 

my url looks like this:

http: // localhost: 14799 / app / Dashboard / Question / 1-330

The getQuestion function simply receives data from the server, I already tested it and return the data without problems, in fact they return data without problems when the page loads.

what I'm trying to do is change the url and get the next or previous question by clicking on these buttons. but what happens calls the getQuestion function, but the URL does not change. if I look very close to the URL and pay attention to its change and return to the previous page very quickly, just a flash!

There is nothing in my code to return to the previous page.

I am trying to add console.log to the getNextPage function to see if it calls the call twice, but it is not, it just calls once for each click.

if I try to click the State button in the console, it will work!

I also add a console log at the end of my getQuestion function to see if it is stuck in the middle of the function, but no! console log occurs, but it returns to the previous page.

I just frantically check things out, but no luck.

Answer 1

A year ago, I struggled with this problem, and now I understand it. its not working angular. I have to use the ngRoute module for navigation. its not about pushstate not working or anything else, about how angular works.

I don't need $scope.GoToNext or $scope.GoToPrev to navigate, because angular will do this for me automatically. just change the route and do it. everything is working fine.

Answer 2

pushState not supported on different browser platforms. Instead, try History.js .