首先声明，本文不是开发帮助文档，需要具有一定的ionic和AngularJS的基础，主要目的是记录我在开发过程中遇到的一些憋手的问题的解决方式。
1.修改导航条中返回按钮的内容
<body ng-app="starter"> <ion-nav-bar class="bar-calm"> <ion-nav-back-button class="button-clear"> <i class="icon ion-ios-arrow-back"></i>返回 </ion-nav-back-button> </ion-nav-bar> <ion-nav-view name="container"></ion-nav-view> </body>
2.修改导航条中标题的样式
<body ng-app="starter"> <ion-nav-bar class="bar-calm nav-bar-title"> <ion-nav-back-button class="button-clear"> <i class="icon ion-ios-arrow-back"></i>返回 </ion-nav-back-button> </ion-nav-bar> <ion-nav-view name="container"></ion-nav-view> </body>
3.给具体的画面中的导航栏添加标题、左右按钮、图片
<ion-view view-title="首页"> <ion-nav-buttons side="left"> <div class="b-box children-all-center"><img src="./img/ic-nav-logo.png" style=" 70px;" /></div> </ion-nav-buttons> <ion-nav-buttons side="right"><button class="button button-clear" ng-click="goNextPage()">注册</button></ion-nav-buttons> <ion-content class="padding"> </ion-content> </ion-view>
注：样式b-box 和 children-all-center是我自己写的让子元素居中的样式，如果不设置，则图片会自动居上显示。
4.通过ui-router的$state完成带参数的页面跳转
a、普通字符串参数
（i）配置$stateProvider.state中的url内容
.state('home', {
url: '/home/:userid',
views: {
'container': {
templateUrl: 'templates/water-curve.html'
}
}
})
（ii）注入$state对象，通过go方法完成跳转
app.controller('LogiCtrl', ['$state', fucntion($state) {
$state.go('home', {
userid: 'test'
});
}]);
（iii）通过注入$stateParams对象，完成参数的接收
var userid = $stateParams.userid;
b、JSON对象参数
//基本思路：将json对象转换成String，然后在传递，接收后再转换为json对象 {//发送参数部分示例代码 var obj = { attr1: '123', attr2: '456', attr3: 1 }; var params = JSON.stringify(obj);//将json对象转化为String } {//接收参数部分示例代码 var param= $stateParams.obj; var obj= JSON.parse(param);//将String对象转化为json对象 }
c、多参数
url: '/home/:userid/:username'
$state.go('home', {
userid: 'test',
username:'测试用户'
});