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属性获取传过来的参数。