angular ui 路由传参

1、 ui-sref、$state.go 的区别

ui-sref 一般使用在 <a>...</a>;

$state.go('someState')一般使用在 controller里面;

这两个本质上是一样的东西,我们看ui-sref的源码:ui-sref最后调用的还是$state.go()方法

2、传递参数

2.1 ui-sref

 .state('home.questionTodo',{
   url:'/questionTodo',
   views:{
     'right-content@home':{
       templateUrl:'home/questionTodo/questionTodo.view.html',
       controller:'questionTodoCtrl'
     }
   },
 })

.state('home.questionTodo.questionDetail',{
    url:'/questionTodo/questionDetail/:questionId',
    views:{
        'right-content@home':{
          templateUrl:'home/questionTodo/questionDetail/questionDetail.view.html',
          controller:'questionDetailCtrl'
        }
    }, 
 })

这个是home页下有一个questionTodo页面,该页面有很多question,点击详情,跳转到该问题的详情页,显示该问题,需要在url上传递questionId.

<a ui-sref="home.questionTodo.questionDetail({questionId:question.questionId})">详情</a>

2.2 $state.go

<a ng-click="goDetail(question.questionId)">详情</a>

在questionTodoCtrl中

$scope.goDetail=function(questionId){
  $state.go('home.questionTodo.questionDetail',{questionId:questionId});  
}

3、 接收参数

在questionDetailCtrl中

.controller('questionDetailCtrl',['$stateParams',function($stateParams){
    console.log($stateParams.questionId);
}])

4、传递参数为对象

上面传递的参数是普通的值,会表现在url中,questionTodo/questionDetail/12(12即questionId)

使用params传递参数时,可以传递任意类型值得参数,并且不会表现在url中,但是刷新该页面时,参数会丢失

.state('home.questionTodo.questionDetail',{
    url:'/questionTodo/questionDetail',
params:{question:null}, // 定义一个空对象,接收数据,同样也可以传递普通参数,但都不会在url上显示 views:{
'right-content@home':{   templateUrl:'home/questionTodo/questionDetail/questionDetail.view.html',   controller:'questionDetailCtrl' } }, })
<a ui-sref="home.questionTodo.questionDetail({question:question})">详情</a>
<a ng-click="goDetail(question)">详情</a>
$scope.goDetail=function(question){
  $state.go('home.questionTodo.questionDetail',{question:question});  
}
原文地址:https://www.cnblogs.com/YangqinCao/p/5777254.html