AngularJS Ionic 使用 ui-sref 和 $state.go 跳转传递参数

有一些页面我们是需要参数的,例如产品页就可能需要产品 id 什么的信息等。一般情况下我们可以在 url 链接后边直接加入参数,例如(参数“:proId”):

<a ng-repeat="pro in pros" href="#/tab/pro/{{pro.id}}">...</a>
.state('tab.pro', {
url: "/pro/:proId",
views: {
'tab-pros': {
templateUrl: "templates/pro-detail.html",
controller: 'ProCtrl'
}
}
})

但是如果我们用的是 ui-sref,或者是在 controller 里跳转页面,又应该怎么传参数呢?

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() 方法。


调用方法:

ui-sref :

<a ng-repeat="pro in pros"  ui-sref="tab.pro({proId:pro.id})">...</a>
.state('tab.pro', {
url: "/pro",
params:{"proId":null},
views: {
'tab-pros': {
templateUrl: "templates/pro-detail.html",
controller: 'ProCtrl'
}
}
})

$state.go:

...
.controller('ProCtl', function($scope, $state){
...
$state.go('tab.pro2',{proId:pro.id});
...
})

参数在目标页面如何接收?使用 $stateParams.参数名 来获取:

...
.controller('ProCtl2', function($scope, $state, $stateParams){
...
alert($stateParams.proId);
...
})

相关文章