zoukankan      html  css  js  c++  java
  • 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'
            })
  • 相关阅读:
    Java异常简介
    Java中的接口
    Java中的抽象类
    Java的多态
    关于this
    面向对象的继承方式详解
    1像素边框问题
    HTML5之本地存储SessionStorage
    js数组去重的4个方法
    前端模块化
  • 原文地址:https://www.cnblogs.com/miny-simp/p/7910069.html
Copyright © 2011-2022 走看看