Using Angularjs with jquerymobile not able go back with the back button

Question

Hello friends i m using angularjs with jquery mobile in my app and done routing with mobileangular adapter javascript that will handle routing (jquery-mobile-angular-adapter-standalone.js).

i have used angularjs for data binding , underscorejs for data processing and routing for my dynamic template. My app work well with routing in forward direction but when i use back button which to not carry back to my previous page. my url shown in address bar is the same that of previous page but page do not display with previous data i m placing all my code below

index.html

    <!doctype html>
<html lang="en" ng-app="work">
<head>
  <meta charset="utf-8">
    s
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css"/>
    <script src="js/components/jquery-mobile-angular-adapter-standalone.js" type="text/javascript"></script>
    <script src="js/components/angular-resource.min.js" type="text/javascript"></script>
    <script src="js/components/underscore-min.js" type="text/javascript"></script>
    <script src="js/app/controllers.js"></script>   
    <script src="js/app/services.js"></script>
    <script src="js/app/app.js"></script>
</head>
<body>
    <div data-role="page">
    </div>
</body>
</html>


html use to display da

showMenuView.html

<div id="menu-list" data-role="page" ng-controller="showMenuController">
    <div data-role="header">
         <a href="" data-icon="back" data-rel="back">Back</a>
     </div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li ng-repeat="menuItem in mainMenuItems">
                <a href="/showMenu/{{menuItem.parent}}" data-rel="external" data-transition="slide" ng-click="selectMenuItem(menuItem._id)">{{menuItem.name}}</a>
            </li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <p>Total {{mainMenuItems.length}} menu item</p>
    </div>
</div>

Controller.js

'use strict';

function showMenuController($scope, $location, Data, $routeParams) {


  Data.query(function(data) {
    $scope.foo = data;

    $scope.mainMenuItems = _.where($scope.foo.menuItems, {parent:$routeParams.parent}); 
  });


  $scope.selectMenuItem = function (id) {
       $scope.mainMenuItems = _.where($scope.foo.menuItems, {parent:id});
   }

}

service.js

angular.module('dataservices', ['ngResource']).  
 factory('Data', function($resource){
         return $resource('data/data.json', {}, {
             query: {method:'GET',isArray:false}
        });

});

app.js

angular.module('work', ['dataservices'])
       .config(['$locationProvider','$routeProvider', function($locationProvider,$routeProvider) {
            $locationProvider.html5Mode(true).hashPrefix('!');
            $routeProvider
                //.when('/showMenu', {parent:'none',templateUrl: 'showMenuView.html', jqmOptions: { transition: 'slide'}})
                .when('/showMenu/:parent', {templateUrl: 'showMenuView.html', jqmOptions: { transition: 'slide'}})
                .otherwise({redirectTo: '/showMenu/none'})
                ;

        }]);

pls help me ,thanks in advance

Wouldn't the $location service conflict with jQuery Mobile navigation model? Try to disable one of them if you can (probably the jQuery Mobile one). — laurent
– laurent, Commented May 22, 2013 at 6:01
$http has a different purpose. If I were you, I'd try first to disable the built-in jQuery Mobile navigation and see if it can work like that. If not, try disabling Angular routing and use the jQuery Mobile navigation. — laurent
– laurent, Commented May 22, 2013 at 6:09
Have you got solution for this issue? I am facing the same issue, i was using routing with AngularJS and jQuery Mobile. — vbjain
– vbjain, Commented Jun 29, 2013 at 13:12

Ashish Rana · Accepted Answer · 2013-06-14 12:23:18Z

1

I have not worked on it myself, but while exploring on whether JQM and angular can work together I stumbled upon this page.

http://simonguest.com/2013/04/08/jquery-mobile-and-angularjs-working-together/

he makes a good point (i.e. both angular and JQM uses and manipulates the url) that appears to be valid in your case also. he suggests to let JQM do this. I think you can also use different special character to process url i.e. angular uses ! and JQM uses # or something like that.

answered Jun 14, 2013 at 12:23

Ashish Rana

853 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Angularjs with jquerymobile not able go back with the back button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related