ionic 1.X ui参数
AngularJS.UIRouter.OptionalandDefaultParamsinRoute
Let'stakealookatexample,whenweneedtoshowlistofitemsbycategorieswithpagination.
AngularStateRouteParameters
AllRouteparametersareoptionalbydefault.That'swhyyoushouldusetrailingslashesincasetheyareempty.Forexample,route/items/1and/items/willwork,butnotthisone:/items.Let'stakeacloserlookandpasscategoryandpagethroughrouteparams:
state('items-list',{
url:'/items-list/:cat/:page',
templateUrl:'items-list.html',
controller:function($scope,$stateParams){
$scope.category=$stateParams.cat;
$scope.page=$stateParams.page;
},
//defaulturiparams
params:{
cat:'all',
page:1
}
});
Then,you'rereadytogowithlinkslikethis:
<aui-sref="items-list({cat:'category-name'})">CategoryName</a>
Thislinkwillnavigateto/items-list/category-name/1.
AngularStateQueryParameters
Allqueryparametersaremappedto$stateParamsobjectofUIRouter.Let'spasscategoryandpagethroughaqueryparameters.
state('items-list',{
url:'/items-list?cat&page',
templateUrl:'items-list.html',
controller:function($scope,$stateParams){
$scope.category=$stateParams.cat||'all';
$scope.page=$stateParams.page||1;
}
});
Afterthat,youmayusesuchlinks:
<aui-sref="items-list({cat:'category-name'})">CategoryName</a>
Suchlinkwillnavigateto/items-list?cat=category-name.
AngularNon-URLStateParameters
Itispossibletopassparameterstostatewithoutshowingthemintheroute.
state('items-list',{
url:'/items-list',
templateUrl:'items-list.html',
controller:function($scope,$stateParams){
$scope.category=$stateParams.cat;
},
params:{
cat:'all'//defaultcategory
}
});
Nowifyoucreatesuchlink:
<aui-sref="items-list({cat:'category-name'})">CategoryName</a>
Itwillnavigateto/items-list.Butcategorywillbeavailablein$stateParams.
Inthiscase,it'snotpossibletosharealink,butitworks:-).
Ifyouwan'ttosharealinkwithhiddenparameters,youmaycreateabuttonforgeneratinglinkwithfullparametersandcreateaspecialstatethatwillparsethatlinkandredirecttocurrentstatewithhiddenparameters.Brieflythat'sit:-)