angularjs不同页面间参数的传递(常用两种)
程序员文章站
2022-04-18 14:38:39
...
1. 基于ui-router的页面跳转传参
1-1、在路由中定义要接收的参数(接收页面)
.state('userDetails', {
url: '/userDetails?phone', //以?为标识接收参数('/userDetails/:phone'也可以,也可以多参)
templateUrl: 'assets/views/userDetails.html',
controller:'userDetailsController' //也可以用 params:{'phone':{}}
})
1-2、在controller传递参数(传参页面)
.controller('pageOneCtrl', function ($scope, $state) {
$scope.toPage2 = function () {
$state.go('page2', {phone:$scope.num});
};
});
1-3、通过$staeParams($state)获得参数phone
myRouterApp.controller('userDetailsController',function($scope,$stateParams){
console.log($stateParams.phone); //或$state.params.phone
});
2.如果要传递多个参数,则用对象的形式传递
(1)在路由中定义params(接收页面)
.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;
});