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屬性獲取傳過來的參數。