1.页面跳转。
第一部分：
左边页面2，右边页面2.1
页面2：
.state('tab.chats', {
url: '/chats',
cache:false,
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
页面2.1：
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
ionic常用的跳转一共有两种类型，一种是通过state的名字--'tab.chat-detail'来跳转；另一种则是通过url--'/chats/:chatId‘来跳转。
先说第一种，通过state名字--'tab.chat-detail'跳转。
(1)在angularjs里，使用：$state.go(''tab.chat-detail'),
(2)如果是a标签跳转，则使用：ui-sref=“tab.chat-detail”。
第二种跳转，通过url---'/chats/:chatId‘来跳转。
(1)在angularjs里，使用：$location.path('/chats/1'),
(2)如果是a标签跳转，则使用：ng-href=“/chats/1”。或href=“/chats/1”
第二部分：
公共页面commen.html
有时候我们写一个项目的时候，几个tab都需要跳到同样一个页面，我们发现页面跳转有问题，不能达到自己想要的效果.比如底部菜单栏tabs上的status模块的一级页面跳转到commen.html页面，而底部菜单栏tabs上的account模块的一级页面也要跳转到commen.html页面，这时我们的页面跳转可能有些阻碍了，如果想要正常跳转，注意这几个地方：
（1）公共文件在commen.htmlapp.js要这么写：
.state('commen', {
url: '/commen',
params:{'id':null},
templateUrl: 'templates/commen.html',
controller: 'CommenCtrl'
})
注意：不要写：views: {'tab-chats': {}},这个公共文件不属于任何一个模块，名字也不要带上：‘tab.chats-’,如果这么写它会默认这个文件属于某个模块的。正确的如上图。然后就可以正常当跳转了:ui-sref=“commen”。
这里很重要！！：这种方式跳转会导致右返回不见，页面自定义返回按钮并点击返回上一个页面的方法在下面第6部分中。
2.页面跳转参数传递。
参数传递根据跳转方式也分为两种：实例：tab.chats列表跳转到子页面tab.chat-detail.均以多个参数来举例。
一、通过state名字--'tab.chat-detail'跳转。
.state('tab.chat-detail', {
params:{'id':null，'chatname':null},
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
(1)在angularjs里，使用：$state.go(''tab.chat-detail'，{id:1,chatname:ben}),
(2)如果是a标签跳转，则使用：ui-sref=“tab.chat-detail({id:1,chatname:ben})”。
多个参数就用逗号隔开。
二、通过url---'/chats/:chatId‘来跳转。
.state('tab.chat-detail', {
url: '/chats/:chatId/:chatname',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}}})
(1)在angularjs里，使用：$location.path('/chats/2/ben'),
(2)如果是a标签跳转，则使用：ng-href=“/chats/1/ben”。或href=“/chats/2/ben”
多个参数在app.js是以“/:”隔开的，在使用时是以”/“隔开的。
3.获取页面url传递的参数：
$stateParams.chatname。
“chatname”是在app.js里定义的参数名的
4.返回时刷新页面：
使用：cache:false
具体使用方法，在app.js里：
.state('tab.chats', {
url: '/chats',
cache:false,
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
5.跳转页面，隐藏底部tab：
（1）app.js里写上：（写在“angular.module('starter',。。”代码和“.run(function($ionicPlatform) {”代码中间即可）
.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$on('$ionicView.beforeEnter', function() {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
});
});
scope.$on('$ionicView.beforeLeave', function() {
$rootScope.hideTabs = false;
});
}
};
})
（2）然后在tabs.html文件里写上：
ng-class="{'tabs-item-hide': $root.hideTabs}"
示例：
<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">
（3）在需要隐藏tabs的页面写上：hide-tabs="true"
例如：<ion-view view-title="{{chat.name}}" hide-tabs="true">
注：显示tabs的是：showTabs。(一般用不着)
例如：<ion-view view-title="{{chat.name}}" showTabs>
隐藏导航栏比较容易，一句话搞定：hide-nav-bar="true"
6.设置右返回按钮。
上面跳转公共文件commen.html的方法会使返回按钮不见或或平时想使用自定义返回按钮可以这样写：
步骤（1）：html代码：
<ion-nav-buttons side="left">
<button class="button button-icon" ng-click="goback()">
<i class="icon ion-ios-arrow-back"></i>
</button>
</ion-nav-buttons>
步骤（2）：controller.js里的angularjs返回上一个页面的代码应该这么写：
.controller('CommenCtrl', function($scope, $stateParams, $ionicHistory) {
$scope.goback = function() {
$ionicHistory.goBack();//返回上一个页面
}
})
7.修改被选中元素属性值：
$scope.change = function($event){
$($event.target).setAttribute('ng-required','districts.length>0’);
}
网友评论