0

你好朋友我在我的应用程序中使用 angularjs 和 jquery mobile，并使用将处理路由的 mobileangular 适配器 javascript (jquery-mobile-angular-adapter-standalone.js) 完成路由。

我使用 angularjs 进行数据绑定，underscorejs 用于我的动态模板的数据处理和路由。我的应用程序适用于正向路由，但是当我使用后退按钮时，该按钮不会返回到我的上一页。我在地址栏中显示的 url 与上一页相同，但页面不显示以前的数据，我将所有代码放在下面

索引.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>

控制器.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});
   }

}

服务.js

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

});

应用程序.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 回答