angularjs项目需要从一个页面跳转到另一个页面，同时需要传递一个参数

来源：互联网发布：幼儿园中班美工教案编辑：程序博客网时间：2024/04/30 15:25

1. 基于ui-router的页面跳转传参
(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

0 0