ui-router传递参数
2016-06-24 11:28
417 查看
有时间我们需要把一个页面的参数传到另一个页面,供另一个页面使用。下面讲一下利用路由传参的方法。
例如有两个页面:page1.html和page2.html,点击page1.html跳转到page2.html,并将page1.html的参数传递过去。
(1)在app.js中定义路由信息,并在接收的页面(即page2.html)定义接收参数。
(2)在page1中定义点击事件。
html中:ng-click=“toPage2(id)”
控制器中:
(3)在Page2中通过$staeParams获得参数ID。
这样就可以成功传递参数了。如果需要传递多个参数,
(1)在app.js中定义路由信息,并在接收的页面(即page2.html)定义接收参数。
(2)在page1中定义点击事件。
html中:
控制器中:
(3)在Page2中通过$staeParams获得参数ID。
例如有两个页面: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; });
相关文章推荐
- 对MBProgressHUD第三方进行源码分析
- Arduino 红外遥控 第一次试验
- UIView的常见属性
- Arduino LCD 温度显示
- 监测UITextField的变化
- 关于UINavigationController、UINavigationBar 中 navigationItem 左侧 “返回” 按钮的问题
- easyui只显示年月
- git clone的错误fatal: HTTP request failed解决办法
- UIAutomation使用简要介绍
- 设计模式之builder模式
- UI控件之Date & Time组件(上)
- UI细节点滴-UIScorllView和UITableView/UITextView拖动退出键盘方法
- SQL Queries from Transactional Plugin Pipeline
- 解决The current branch is not configured for pull No value for key branch.master.merge found in config
- easyui的基本用法
- SSIS Passing Parameters to an ADO .NET Source query;向ado.net数据源传递参数。
- Color types not allowed (at ‘drawable’ with value ‘#f0f0f0’)
- UIsheji
- UIsheji
- UiSelector的官方帮助文档