• 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});  
    }
  • 相关阅读:
    Caused by: java.lang.IllegalArgumentException: Not an managed type: class XXX
    SpringBoot配置文件详细解析
    解决eclipse环境下maven项目tomcat启动,未加载到项目的问题
    CSS+元素,鼠标事件触发鼠标模形变成手状的形状
    LeetCode-Wildcard Matching
    LeetCode-NQueensII
    LeetCode-Climbing Stairs
    LeetCode-Word Search
    LeetCode-Minimum Window Substring
    LeetCode-Largest Rectangle in Histogram
  • 原文地址:https://www.cnblogs.com/YangqinCao/p/5777254.html
Copyright © 2020-2023  润新知