angularjs项目需要从一个页面跳转到另一个页面,同时需要传递一个参数
2015-11-30 16:29
696 查看
1. 基于ui-router的页面跳转传参
(1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去。
(2) 在producers.html中,定义点击事件,比如ng-click="toProducer(producerId)",在ProducersCtrl中,定义页面跳转函数 (使用ui-router的$state.go接口):
(3) 在ProducerCtrl中,通过ui-router的$stateParams获取参数producerId,譬如:
(1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去。
.state('producers', { url: '/producers', templateUrl: 'views/producers.html', controller: 'ProducersCtrl' }) .state('producer', { url: '/producer/:producerId', templateUrl: 'views/producer.html', controller: 'ProducerCtrl' })
(2) 在producers.html中,定义点击事件,比如ng-click="toProducer(producerId)",在ProducersCtrl中,定义页面跳转函数 (使用ui-router的$state.go接口):
.controller('ProducersCtrl', function ($scope, $state) { $scope.toProducer = function (producerId) { $state.go('producer', {producerId: producerId}); }; });
(3) 在ProducerCtrl中,通过ui-router的$stateParams获取参数producerId,譬如:
.controller('ProducerCtrl', function ($scope, $state, $stateParams) { var producerId = $stateParams.producerId; });
链接:http://www.zhihu.com/question/33565135/answer/69651500
相关文章推荐
- 使用 angular-async-loader 来实现异步加载 angular 模块
- AnjularJS 学习笔记(数据的绑定)
- AnjularJS初学(模拟输入限制)
- AnjularJS初学(AnjularJS验证)
- AnjularJS初学(AnjularJS跨域取值)
- AnjularJS 初学阶段(Anjularjs调取Java数据接口)
- Angular相关内容学习总结
- 【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)
- 关于angularjs的UI-Router使用
- 学习 ui-router - 路由控制时查找的资料,记录下来以供后期使用
- Angular ui-router同时加载多个视图,根据不同url在同一个视图切换内容模板
- AngularJS-UI-Router学习
- UI-Router:为什么开发者都不喜欢Angular.js内置的路由
- 深究AngularJS——ui-router详解
- 深究AngularJS——ui-router详解
- angularJs 中ui-router 路由向controller传递数据
- angular ng-click获取触发事件对象this
- AngularJs在ng-click函数中如何获取代表当前元素的DOM对象
- 3、AngularJs的双向数据绑定
- AngularJS UI Router(ui.router)嵌套视图(Nested Views)