ionic_uiRoute (路由) 传递参数

ionic_uiRoute (路由)+传参

       当用户在你的app中浏览时，Ionic能够保持检测他们的浏览历史。通过了解他们的浏览历史， 向左或向右滑动时可以正确的在视图间转换，或不转换。一个额外的好处是Ionic的导航系统 具有可以管理多个历史记录的能力。 Ionic利用AngularUI路由模块，使应用程序接口可以组织成不同的“状态”。例如Angular的核心 $route服务，利用URL控制视图。然而，AngularUI路由提供了一个更强大的状态管理，即状 态可以被命名，嵌套， 以及合并视图，允许一个以上模板呈现在同一个页面。此外，每个状 态无需绑定到一个URL，并且数据可以更灵活地推送到每个状态。 用ionNavView指令在你的app中渲染模版。每个模板都是状态的一部分。状态通常映 

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body>
11     <ion-header-bar>
12         <h1 class="title">Header</h1>
13     </ion-header-bar>
14     <ion-content>
15         <div ui-view></div>
16     </ion-content>
17     <ion-footer-bar>
18         <h1 class="title">Footer</h1>
19     </ion-footer-bar>
20 <script>
21     var app = angular.module('myApp', ['ionic']);
22     app.config(function($stateProvider,$urlRouterProvider){
23         $stateProvider
24                 .state('register',{
25                     url:'/myRegister/:id',
26                     templateUrl:'exercise_tpl/register.html',
27                     controller:'ctrPage'
28                 })
29                 .state('login',{
30                     url:'/myLogin/:id',
31                     templateUrl:'exercise_tpl/login.html',
32                     controller:'ctrPage'
33                 })
34                 .state('main',{
35                     url:'/myMain/:id',
36                     templateUrl:'exercise_tpl/main.html',
37                     controller:'ctrPage'
38                 })
39         $urlRouterProvider.otherwise('myLogin');
40     })
41     app.controller('ctrPage',[
42         '$scope',
43         '$state',
44         '$stateParams',
45         function($scope,$state,$stateParams){
46         $scope.jump = function(state,arg){
47             $state.go(state,arg);
48         }
49         $scope.ID = $stateParams.id;
50             console.log($scope.ID);
51     }]);
52 </script>
53 </body>
54 </html>

 login页面如下：

1 <h1>这是登录页面</h1>
2 <button class="button button-balanced" ng-click="jump('register',{id:369})">注册</button>
3 <button class="button button-royal"  ui-sref="main({id:456})">登录</button>
4 <a href="#/myMain/123">传参到主页面</a>

register页面如下：

1 <h1>这是regist注册页面</h1>
2 <button class="button button-royal" ui-sref="login">注册完成去登录</button>

main页面如下：

1 <h1>这是main主页面</h1>
2 <button class="button button-royal" ui-sref="login">退出登录</button>

 

posted @ 2017-01-09 18:57  时间脱臼  阅读(841)  评论(0)    收藏  举报