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的方式传递参数。因此两者之间的调用，应该是互通的。
基础准备
创建一个空白的项目，在body标签中增加下面的代码
Back
在www文件夹下面创建templates文件夹，并创建list.html和detail.html
在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);
我就是我
淡淡的烟草味﹌
骑猪看日落
傷城~
亦凉
还没有评论，来说两句吧...