欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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;
});