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});  
}