zoukankan      html  css  js  c++  java
  • ui-router传递参数

    有时间我们需要把一个页面的参数传到另一个页面,供另一个页面使用。下面讲一下利用路由传参的方法。

    例如有两个页面:page1.html和page2.html,点击page1.html跳转到page2.html,并将page1.html的参数传递过去。

    (1)在app.js中定义路由信息,并在接收的页面(即page2.html)定义接收参数。

    .state('page1', { 
     url: '/page1', 
     templateUrl: 'templates/page1.html', 
     controller: 'pageOneCtrl' 
    }) 
    .state('page2', { 
     url: '/page2',
     templateUrl: 'templates/page2.html',
     controller: 'pageTwoCtrl',
     params:{'ID':{}}
    })

    (2)在page1中定义点击事件。

    html中:ng-click=“toPage2(id)”

    控制器中:

    .controller('pageOneCtrl', function ($scope, $state) {
     $scope.toPage2 = function (id) { 
      $state.go('page2', {ID:id}); 
      }; 
    });

    (3)Page2中通过$staeParams获得参数ID。

    .controller('pageTwoCtrl’, function ($scope, $state, $stateParams) {
       var receivedId = $stateParams.ID;
       console.log(receivedId);
       //打印的结果即为id
    });

    这样就可以成功传递参数了。如果需要传递多个参数,

    (1)在app.js中定义路由信息,并在接收的页面(即page2.html)定义接收参数。

    .state('page1', { 
     url: '/page1', 
     templateUrl: 'templates/page1.html', 
     controller: 'pageOneCtrl' 
    }) 
    .state('page2', { 
     url: '/page2',
     templateUrl: 'templates/page2.html',
     controller: 'pageTwoCtrl' ,
     params:{args:{}}
    })

    (2)在page1中定义点击事件。

    html中:

    ng-click=“toPage2(name,number)”

    控制器中:

    .controller('pageOneCtrl', function ($scope, $state) {
     $scope.toPage2 = function (name,number) { 
     $state.go('page2', {
     args:{
      NAME:name,
      NUMBER:number
      }); 
     }; 
    });

    (3)Page2中通过$staeParams获得参数ID。

    .controller('pageTwoCtrl’, function ($scope, $state, $stateParams) {
       var receivedName = $stateParams.args.NAME;
       var receivedNumber = $stateParams.args.NUMBER;
    });
  • 相关阅读:
    连接池
    Socket编程实践(2) --Socket编程导引
    自己定义JSTL函数
    用new和delete运算符进行动态分配和撤销存储空间
    Unix网络编程学习笔记之第12章 IPv4与IPv6的互操作性
    矩阵十题【五】 VOJ1049 HDU 2371 Decode the Strings
    Unity3d / 3ds max 模型分享站点
    浙大PAT考试1077~1080(2014上机复试题目)
    Java反射学习总结五(Annotation(注解)-基础篇)
    关于http和https淘宝支付宝跨域解决方法研究
  • 原文地址:https://www.cnblogs.com/adjk/p/5613641.html
Copyright © 2011-2022 走看看