angularJS 传参的四种方法 【修改】

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', //方法一；通过路由 传参   直接把参数挂载在url上
　　url: '/producer'   //方法二： 通过 params
    templateUrl: 'views/producer.html',
　　params:{producerId:""},  //方法二：路由设置参数
    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("url",{}) 传递参数
        $state.go('producer', {producerId: producerId}); 通过 go接口进行传参时，要注意   在接受参数的路由下要配置 params：{producerId:""} 键名是相同的 否则接受不到参数
    };
});

(3) 在ProducerCtrl中，通过ui-router的$stateParams获取参数producerId，譬如：

.controller('ProducerCtrl', function ($scope, $state, $stateParams) {
   var producerId = $stateParams.producerId;   // 获得参数   $stateParams.key     方法二
});