• 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'
            })
  • 相关阅读:
    在客户端模拟调用srv和topic
    直流电机测试标准
    vue项目修改host实现地址代理,实现一键登录
    小程序 日期格式化
    ES6学习笔记之async函数
    ES6学习笔记之promise
    ES6学习笔记之箭头函数
    ES6学习笔记之var,let,const
    axios post后台接收不到参数
    vue-cli2配置scss遇到的各种坑
  • 原文地址:https://www.cnblogs.com/miny-simp/p/7910069.html
Copyright © 2020-2023  润新知