AngularJS-路由模块ui-sref指令跳转页面传参方式

需求讲解:网点详情页面包含(网点的基础信息,以及网点的人员及车辆列表信息,最下方有个按钮是编辑网点的按钮,需要跳转至表单页面)

路由 router.js

 //网点管理详情表单页面
        .state('enterpriseBranchDetail', {
            url: "/enterpriseBranchDetail/:id",
            templateUrl: "modules/enterpriseBranch/detail/detail.html",
            data: { pageTitle: '网点管理' },
            controller: "EnterpriseBranchDetailController",
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'MetronicApp',
                        insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
                        files: [
                        	  './assets/global/plugins/ckeditor/ckeditor.js',
                              'modules/enterpriseBranch/EnterpriseBranchService.js',
                              'modules/enterpriseBranch/detail/EnterpriseBranchDetailController.js'
                        ]
                    });
                }]
            }
        })

//网点管理编辑表单页面
        .state('enterpriseBranchForm', {
            url: "/enterpriseBranchForm/:id",     //需要传入一个id参数放在url后面传递过去
            templateUrl: "modules/enterpriseBranch/form/form.html",
            data: { pageTitle: '网点管理' },
            controller: "EnterpriseBranchFormController",
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'MetronicApp',
                        insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
                        files: [
                        	  './assets/global/plugins/ckeditor/ckeditor.js',
                              'modules/enterpriseBranch/EnterpriseBranchService.js',
                              'modules/enterpriseBranch/form/EnterpriseBranchFormController.js'
                        ]
                    });
                }]
            }
        })

detail 的Controller

angular.module('MetronicApp').controller('EnterpriseBranchDetailController', ['$rootScope', '$scope','$state','$stateParams', 'settings','$uibModal','EnterpriseBranchService', function($rootScope,$scope,$state,$stateParams,settings,$uibModal,EnterpriseBranchService) {
	
	//获取数据
	if($stateParams.id!=""){
		//设置资讯明细数据
		EnterpriseBranchService.detail({
			id:$stateParams.id,
			success:function(data){
				if(data.data!=null){
					$scope.record=data.data;
					$scope.record.branch_image_a =settings.fileUrlPath+"/"+$scope.record.branch_image;
				}					
			},
			error:function(e){
			}
		});

......

html模板

<button type="button" class="btn btn-default" ui-sref="enterpriseBranchForm({id:record.id})">
            <i class="fa fa-remove"></i> 编辑网点信息</button>

获取路由上参数: 
注入$stateParams服务,$stateParams是个json对象,这个json对象所包含的数据就是我们前面传入的参数。

从$stateParams中获取我们的id参数

/* Setup blank page controller */
angular.module('MetronicApp').controller('EnterpriseBranchFormController', ['$rootScope', '$scope','$state','$stateParams', 'settings','$uibModal','$http', 'EnterpriseBranchService', function($rootScope,$scope,$state,$stateParams,settings,$uibModal,$http,EnterpriseBranchService) {
	
	//获取数据
	if($stateParams.id!=""){

.........

AngularJS跨页面传参方式小结:

①、在路由中声明url: ‘url/:参数’;

②、获取数据通过ui-sref = “url{id:item.id}”的方式将参数挂载到url后面;

③、在控制器中注入$stateParams服务,利用\$stateParams.params属性获取传过来的参数。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值