2013-05-22 37 views
0

你好朋友即時通訊jjery與我的應用程序中使用angularjs和完成路由與mobileangular適配器將處理路由的javascript(jquery-mobile-angular-adapter-standalone.js) 。與jquerymobile使用Angularjs無法返回後退按鈕

我已經使用angularjs進行數據綁定,underscorejs用於數據處理和爲我的動態模板進行路由。我的應用程序可以正常工作,但是當我使用後退按鈕時,不會回到我的上一頁。在地址欄中顯示我的網址是一樣的,以前的頁面,但頁面不與以前的數據顯示 IM把我所有的代碼下面

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

     }]); 

請幫助我,在此先感謝

+0

'$ location'服務不會與jQuery Mobile導航模型衝突嗎?嘗試禁用它們中的一個(如果可以的話)(可能是jQuery Mobile的)。 –

+0

如果我使用$ http而不是位置 – unkown

+0

'$ http'具有不同的目的。如果我是你,我會先嚐試禁用內置的jQuery Mobile導航,看看它是否可以這樣工作。如果不是,請嘗試禁用Angular路由並使用jQuery Mobile導航。 –

回答

1

我還沒有它的工作我自己,但同時探索JQM和angular是否可以一起工作,我偶然發現了這個頁面。

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

他做一個好點(即兩個角和JQM使用和操縱URL)出現在你的情況下,也是有效的。他建議讓JQM做到這一點。我認爲你也可以使用不同的特殊字符來處理網址,即角度使用! JQM使用#或類似的東西。