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);