1.頁面跳轉(zhuǎn)规脸。
第一部分:
頁面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常用的跳轉(zhuǎn)一共有兩種類型熊咽,一種是通過state的名字--'tab.chat-detail'來跳轉(zhuǎn)莫鸭;另一種則是通過url--'/chats/:chatId‘來跳轉(zhuǎn)。
先說第一種横殴,通過state名字--'tab.chat-detail'跳轉(zhuǎn)被因。
(1)在angularjs里,使用:$state.go(''tab.chat-detail'),
(2)如果是a標(biāo)簽跳轉(zhuǎn)衫仑,則使用:ui-sref=“tab.chat-detail”梨与。
第二種跳轉(zhuǎn),通過url---'/chats/:chatId‘來跳轉(zhuǎn)惑畴。
(1)在angularjs里蛋欣,使用:$location.path('/chats/1'),
(2)如果是a標(biāo)簽跳轉(zhuǎn),則使用:ng-href=“/chats/1”如贷。或href=“/chats/1”
第二部分:
有時候我們寫一個項(xiàng)目的時候到踏,幾個tab都需要跳到同樣一個頁面杠袱,我們發(fā)現(xiàn)頁面跳轉(zhuǎn)有問題,不能達(dá)到自己想要的效果.比如底部菜單欄tabs上的status模塊的一級頁面跳轉(zhuǎn)到commen.html頁面窝稿,而底部菜單欄tabs上的account模塊的一級頁面也要跳轉(zhuǎn)到commen.html頁面楣富,這時我們的頁面跳轉(zhuǎn)可能有些阻礙了,如果想要正常跳轉(zhuǎn)伴榔,注意這幾個地方:
(1)公共文件在commen.htmlapp.js要這么寫:
.state('commen', {
url: '/commen',
params:{'id':null},
templateUrl: 'templates/commen.html',
controller: 'CommenCtrl'
})
注意:不要寫:views: {'tab-chats': {}},這個公共文件不屬于任何一個模塊纹蝴,名字也不要帶上:‘tab.chats-’,如果這么寫它會默認(rèn)這個文件屬于某個模塊的。正確的如上圖踪少。然后就可以正常當(dāng)跳轉(zhuǎn)了:ui-sref=“commen”塘安。
這里很重要!T荨:這種方式跳轉(zhuǎn)會導(dǎo)致右返回不見兼犯,頁面自定義返回按鈕并點(diǎn)擊返回上一個頁面的方法在下面第6部分中。
2.頁面跳轉(zhuǎn)參數(shù)傳遞集漾。
參數(shù)傳遞根據(jù)跳轉(zhuǎn)方式也分為兩種:實(shí)例:tab.chats列表跳轉(zhuǎn)到子頁面tab.chat-detail.均以多個參數(shù)來舉例切黔。
一、通過state名字--'tab.chat-detail'跳轉(zhuǎn)具篇。
.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標(biāo)簽跳轉(zhuǎn)诗芜,則使用:ui-sref=“tab.chat-detail({id:1,chatname:ben})”瞳抓。
多個參數(shù)就用逗號隔開。
二绢陌、通過url---'/chats/:chatId‘來跳轉(zhuǎn)挨下。
.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標(biāo)簽跳轉(zhuǎn)脐湾,則使用:ng-href=“/chats/1/ben”臭笆。或href=“/chats/2/ben”
多個參數(shù)在app.js是以“/:”隔開的秤掌,在使用時是以”/“隔開的愁铺。
3.獲取頁面url傳遞的參數(shù):
$stateParams.chatname。
“chatname”是在app.js里定義的參數(shù)名的
4.返回時刷新頁面:
使用:cache:false
具體使用方法闻鉴,在app.js里:
.state('tab.chats', {
url: '/chats',
cache:false,
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
5.跳轉(zhuǎn)頁面茵乱,隱藏底部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>
隱藏導(dǎo)航欄比較容易渠羞,一句話搞定:hide-nav-bar="true"
6.設(shè)置右返回按鈕斤贰。
上面跳轉(zhuǎn)公共文件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返回上一個頁面的代碼應(yīng)該這么寫:
.controller('CommenCtrl', function($scope, $stateParams, $ionicHistory) {
$scope.goback = function() {
$ionicHistory.goBack();//返回上一個頁面
}
})
7.修改被選中元素屬性值:
$scope.change = function($event){
$($event.target).setAttribute('ng-required','districts.length>0’);
}