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

 


免责声明!

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



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