ionic之路由跳转

简介

ionic中比较常见的两个基于状态机（stateProvider）的页面跳转分别是

• ui-sref
• state.go

查看ui-sref的底层实现源码可以看到

element.bind("click", function(e) {    var button = e.which || e.button;    if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {      var transition = $timeout(function() {        // HERE we call $state.go inside of ui-sref        $state.go(ref.state, params, options);      });

ui-sref最终同样是选择了state.go的方式传递参数。因此两者之间的调用，应该是互通的。

基础准备

1. 创建一个空白的项目，在body标签中增加下面的代码

<div>  <div>    <ion-nav-bar class="bar-stable">      <ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>    </ion-nav-bar>    <ion-nav-view></ion-nav-view>  </div></div>

1. 在www文件夹下面创建templates文件夹，并创建list.html和detail.html

1. 在app.js中，增加config的代码

  .config(function ($stateProvider, $urlRouterProvider) {    // Ionic uses AngularUI Router which uses the concept of states    // Learn more here: https://github.com/angular-ui/ui-router    // Set up the various states which the app can be in.    // Each state's controller can be found in controllers.js    $stateProvider      .state('list', {        url: '/main',        templateUrl: 'templates/list.html',        controller: 'listCtrl'      })      .state('detail', {        url: '/detail',        params:{"id":null},        templateUrl: 'templates/detail.html',        controller: 'detailCtrl'      })    $urlRouterProvider.otherwise('/main')  });

其中，params，就是用来声明list向detail传递的参数的。如果多个变量，可以用，隔开。

ui-sref跳转并传递参数

list.html中增加下面的代码，点击后跳转到detail页面

<a ui-sref="detail({id:2})" id="list-button1" class=" button button-positive  button-block ">Tap me!</a>

state跳转并传递参数

ListController中增加下面的代码，点击后跳转到detail页面

      //显示大图      $scope.showBigImage = function (imageIndex) {  //传递一个参数（图片的URl）        $state.go('detail', {id: imageIndex}, {});      };

然后在list中，创建一个元素，绑定ng-click = showBigImage(0) 即可

解析参数

在DetailController中，使用$stateParams获取参数

console.log("detailCtrl id = ", $stateParams.id);