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 方法二 }); 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM