angularjs不同页面间参数的传递

时间:2023-03-09 14:53:59
angularjs不同页面间参数的传递

1、在路由中定义要接收的参数

.state('userDetails', {
url: '/userDetails?phone', //以?为标识接收参数
templateUrl: 'assets/views/userDetails.html',
controller:'userDetailsController' //也可以用 params:{'phone':{}}
 })

2、在控制器中传递参数

.controller('pageOneCtrl', function ($scope, $state) {
$scope.toPage2 = function () {
$state.go('page2', {phone:$scope.num});
};
});

3、通过$staeParams获得参数phone

myRouterApp.controller('userDetailsController',function($scope,$stateParams){
console.log($stateParams.phone); });

如果要传递多个参数,则用对象的形式传递

(1)在app.js中定义路由信息,并在接收的页面(即page2.html)定义接收参数。

.state('page1', { 
url: '/page1', 
templateUrl: 'templates/page1.html', 
controller: 'pageOneCtrl' 
}) 
.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;
});