0

こんにちは、アプリで 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'})
                ;

        }]);

よろしくお願いします。

4

1 に答える 1

1

私は自分で作業したことはありませんが、JQM と angular が連携できるかどうかを調べているときに、このページに出くわしました。

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

彼は、あなたの場合にも有効であるように見える良い点を述べています（つまり、角度とJQMの両方がURLを使用および操作します）。彼は、JQM にこれを行わせることを提案しています。URLを処理するために別の特殊文字を使用することもできると思います。JQM は # などを使用します。

于 2013-06-14T12:23:18.540 に答える