Navigates of page programmatically but address bar URL doesn't changes

Question

I am using J-Query Mobile and AngularJS and on the pressing link i want navigate user to different page it navigates but url address in address bar doesn't change how to solve this issue. I ma using the single page structure

HTML Part

<a href="" ng-controller="addFoodToLog" ng-click="go()" data-role="button">Add To Log</a>

JS Part

var myApp = angular.module('myApp',[]);

myApp.controller('addFoodToLog',function($scope){
  $scope.go = function() {
    //Here Selected Food Bump In Food Log
    alert("Successfully Add In Your Log");
    $.mobile.changePage('index.html#foodscreen');
  }
});

Somebody asked it before
http://stackoverflow.com/questions/7824243/jquery-mobile-mvc-getting-the-browser-url-to-change-with-redirecttoaction You have to disable mobile ajax. look at the link. — Dvir, Sep 28 '13 at 21:35
You move from page1.html to page2.html? Or you navigate within the same index.html from #page1 to #page2? If the latter, `$.mobile.changePage('#foodscreen', { changeHash: true });`. — Omar, Sep 28 '13 at 21:57
@Omar i have just index page its single page structure `$.mobile.changePage('#foodscreen', { changeHash: true });` but this not help same issue — Blu, Sep 28 '13 at 22:05
Ok, try `$(window).hashchange();` after `$.mobile.changePage('#foodscreen', { changeHash: true });`. — Omar, Sep 28 '13 at 22:15
@Omar no effects after added. i did like that `myApp.controller('addFoodToLog',function($scope){ $scope.go = function() { //Here Selected Food Bump In Food Log alert("Successfully Add In Your Log"); $.mobile.changePage('#foodscreen', { changeHash: true }); $(window).hashchange(); } });` — Blu, Sep 28 '13 at 22:24
@BrianGenisio how? what changes are require what should write instead of `$.mobile.changePage('#foodscreen', { changeHash: true }); ` — Blu, Sep 28 '13 at 22:58
Checkout `$route` and `$location` in Angular.js documentation: http://docs.angularjs.org/api/ngRoute.$route and http://docs.angularjs.org/api/ng.$location. You can also watch the Angular routing story in http://egghead.io episodes 29-33. A more full-featured router replacement is the AngularUI UI-Router. These systems help you manage your Angular application states much better. — Brian Genisio, Sep 29 '13 at 11:56

Blu · Accepted Answer · 2014-06-03T08:25:46.407

I solved my issue
If you use Angular-JS, JQuery Mobile and also Angular JQM Adopter then you can achieve your requirement by change your code from

myApp.controller('addFoodToLog',function($scope){
    $scope.go = function() {
    //Here Selected Food Bump In Food Log
    alert("Successfully Add In Your Log");
    $.mobile.changePage('index.html#foodscreen');
    }
});

To this

myApp.controller('addFoodToLog',function($scope,$location){
    $scope.go = function() {
    //Here Selected Food Bump In Food Log
    alert("Successfully Add In Your Log");
    $location.hash('foodscreen');
  }
});

Navigates of page programmatically but address bar URL doesn't changes

1 Answers1