angularjs 页面跳转传递参数

基于ui-router的页面跳转传参

① app.js中

        .state('faceWarning',{
            url: '/faceWarning',
            templateUrl: 'pages/face/faceWarning.html',
            controller: 'WarningCtrl'
        })
        .state('faceWarningList',{
            url: '/faceWarningList/:groupId',
            templateUrl: 'pages/face/faceWarningList.html',
            controller: 'WarningListCtrl'
        })

② faceWarning.html中点击跳转事件  

ng-click="jumpWarningList(data.groupId)"

faceWarning.js中，定义页面跳转函数 (使用ui-router的$state.go接口)：

faceApp.controller('WarningCtrl', ['$rootScope', '$scope', '$state',
    function($rootScope, $scope, $state) {
         $scope.jumpWarningList = function(groupId) {
            $state.go('faceWarningList', {groupId: groupId});
        };
  }]);

③ faceWarningList.js，通过ui-router的$stateParams获取参数groupId

faceApp.controller('WarningCtrl', ['$rootScope', '$scope', '$stateParams',
    function($rootScope, $scope, $stateParams) {
         $scope.searchSpecial.groupId = $stateParams.groupId;
  }]);

这种跳转，在不传递参数时，url: '/faceWarningList/:groupId', 这里将会影响单独跳转的实现，导致点击无效。

如果要实现单独点击跳转（主页面不带参数跳转），需要在app.js中定义参数，不然$state.go在传输之后在目标controller接受的时候会被filter过滤掉

        .state('faceWarningList',{
            url: '/faceWarningList',
            templateUrl: 'pages/face/faceWarningList.html',
            params: {'groupId': null},
            controller: 'WarningListCtrl'
        })

 

转载于:https://www.cnblogs.com/miny-simp/p/7910069.html