zoukankan      html  css  js  c++  java
  • 关于ng路由的传参问题(传递一个,多个参数)

    在ng的页面条转传参数的方法,ui-sref,$state

    Ui-sref:用于html页面进行单页面的跳转

    $state:用于js代码中跳转

    重点:明确传递方,接受方

    [传递单个参数]

    对于传递方:

    传递方:ui-sref="home.ideas.edit({id:detailIdeas[0].idea.id})

       或者:$state.go(home.ideas.edit,{id: detailIdeas[0].idea.id });

    对于接受方:

    .state('home.ideas.edit', {//编辑创意
        url: '/detailsEdit/:id',
        views: {
            "part": {
                templateUrl: 'tpls/ideas/edit.html',
                controller:"ideas_edit_ctrl"
            }
        }
    })

    使用:

    在ideas_edit_ctrl控制器中,我们可以直接使用$state.params 来获取我们传递的参数

    (要先注入$state)

     var idx={
        ideaID:$state.params.id
    };

    [传递多个参数]($state)

    其实传递参数的本质都是一样的,对于传递多个参数的我我们可以将多个参数组成一个对象,然后将这个对象转换成字符串,将字符串传递过去。

    Em:

    使用$state.go()传递多个参数;

    对于传递方:

    User_info={ name:’菱角’, age:15, skill:’angular’ };
    $state.go("home.ideas.allIdeas",{user_right:JSON.stringify(user_info});
    对于接受方:(还是保持不变)
    .state('home.ideas.allIdeas', {//全部创意
        url: '/allIdeas/:user_right',
        views: {
            "part": {
                templateUrl: 'tpls/ideas/all_idea_list.html',
                controller:'ideas_allIdeas_ctrl'
            }
        }
    })

    使用:

    ideas_allIdeas_ctrl控制器中

    var user_right=JSON.parse($state.params.user_right);
    user_right的结构:
    
    user_right={ name:’菱角’, age:15, skill:’angular’}

    使用:ui-sref传递多个参数:

    传递方:

    <button  ui-sref="home.ideas.edit({id:detailIdeas[0].idea.id,name:detailIdeas[0].idea.id.name})">go edit</button>

    接受方:

     .state('home.ideas.edit', {//编辑创意
        url: '/detailsEdit?id&name',
        views: {
            "part": {
                templateUrl: 'tpls/ideas/edit.html',
                controller:"ideas_edit_ctrl"
            }
        }
    })
    在ideas_edit_ctrl控制器中,我们可以直接使用$state.params 来获取我们传递的参数(要先注入$state)
     var idx={
        ideaID:$state.params.id
        ideaName:$state.params.name
    };
  • 相关阅读:
    转载:C#中的属性、和字段的区别
    在idea中创建一个maven web工程及解决工程创建过慢问题
    注解&动态代理
    Listener&Filter
    Ajax&jQuery
    JSP&EL&JSTL
    Cookie&Session
    HttpServletRequest&HttpServletResponse
    Http协议&Servlet
    XML
  • 原文地址:https://www.cnblogs.com/evaling/p/6664606.html
Copyright © 2011-2022 走看看