こんにちは、アプリで jquery mobile で angularjs を使用し、ルーティングを処理する mobileangular アダプター javascript (jquery-mobile-angular-adapter-standalone.js) でルーティングを完了しました。
データ バインディングに angularjs を使用し、動的テンプレートのデータ処理とルーティングに underscorejs を使用しました。私のアプリは順方向のルーティングでうまく機能しますが、戻るボタンを使用すると前のページに戻りません。アドレス バーに表示される URL は前のページの URL と同じですが、以前のデータではページが表示されません。すべてのコードを下に配置します。
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'})
;
}]);
よろしくお願いします。