参数传递，是在程序运行过程中，实际参数就会将参数值传递给相应的形式参数，然后在函数中实现对数据处理和返回的过程，方法有按值传递参数，按地址传递参数和按数组传递参数。
最近用angular做app项目，除了实际的功能外，遇到很多坑，首先，我选用了angular框架，angular框架的优点我就不说了，但是确在其中遇到了很多坑，今天的主题是关于整理angularJS使用中传递参数的问题。
一、ngRoute中参数传递问题
1.1 ng-href中的参数传递
html中代码
<a ng-href="#/list/{{ id }}"> ID{{ id }}</a>
app.js中的代码
//主入口文件
//依赖于路由模块
angular.module('myApp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/list/:id',{
templateUrl:'./view/car.html',
controller:'CarCtrl as carCtrl'
})
.otherwise({
redirectTo:'./view/home.html'
})
}])
参数接收
angular.module('myApp')
//依赖注入$css（这个是angularCSS这个插件中的服务）
.controller("CarCtrl",['$routeParams',function($routeParams){
//$routeParams 可以获取到通过路由穿过来的所有参数，我们可以通过点语法获取到相应的参数
var self = this;
self.name = $routeParams.id;
}])
二、ui.router中参数传递问题
2.1 ui-sref中的参数传递
html中使用ui-sref
<li ng-repeat="item in marketCtrl.getData" ui-sref=".categary({value:item.id})">{{item.name}}</li>
app.js
//主入口文件
//依赖于路由个模块
angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('market.categary', {
url : '/categary/:value',
templateUrl : './view/market_1.html',
controller : 'ProInfoCtrl as proInfoCtrl'
})
}])
参数接收
angular.module('myApp')
.controller('ProInfoCtrl', ['$stateParams',function($stateParams){
var self = this;
self.value = $stateParams.value;
}] )
2.2 $state.go中的参数传递
html中
<img ng-click="homeCtrl.goDetail(name)" />
首先确定此时是跳转到哪个页面，跳转到哪个页面就在哪个页面的路由中接收参数，比如此时我是跳转到详情页面。
app.js中
angular.module('myApp', ['ui.router')
.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('detail', {
url:'/detail/:name',
templateUrl : './view/detail.html',
controller : 'DetailCtrl as detailCtrl'
})
}])
参数接收并对其进行操作
//注意：这里angular.module('myApp') 第二个参数依赖去掉
angular.module('myApp')
.controller('DetailCtrl', ['$css', '$state','$stateParams','HomeService', '$location',function ($css,$state,$stateParams,HomeService,$location) {
var self =this;
//接收name参数，并且给name赋值
self.name = $stateParams.name
//通过获取到的name，反序列查找相应的对象
HomeService.HotDataList().success(function (result) {
for (var tempHotObj of result.data) {
if($stateParams.name == tempHotObj.name){
self.getInfo = tempHotObj;
return;
}
self.getInfo = null;
}
});
}])
三、其他参数传递
3.1基于factory的页面跳转传参
假设有N个页面，每个页面都需要用户填选信息，最终引导用户至尾页提交，同时后一个页面要显示前面所有页面填写的信息。这个时候用factory传参是比较合理的选择
.factory('myFactory', function () {
//定义参数对象
var myObject = {};
// 定义传递数据的setter函数
var _setter = function (data) {
myObject = data;
};
//定义获取数据的getter函数
var _getter = function () {
return myObject;
};
// 在controller中通过调setter()和getter()方法可实现提交或获取参数的功能
return {
setter: _setter,
getter: _getter
};
});
举个栗子
为了方便观看，我把所有配置写在一个页面中，正式书写的时候，注意代码规范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="homeCtrl">
<h2>page1</h2>
<form ng-submit="addInput()">
<input type="text" ng-model="input.name" placeholder="输入员工姓名">
<input type="number" ng-model="input.age" placeholder="输入员工年龄">
<input type="text" ng-model="input.title" placeholder="输入员工职位">
<input type="submit" value="add">
</form>
</div>
<br />
<div ng-controller="mineCtrl">
<h2>page2</h2>
<ul>
<li ng-repeat="p in persons.list">
{{p.name}}, {{p.age}}, {{p.title}}
</li>
</ul>
</div>
<script type="text/javascript" src="../lib/angular.min.js" ></script>
<script type="text/javascript" src="../lib/angular-css.js" ></script>
<script type="text/javascript" src="../lib/angular-ui-router.js" ></script>
<script>
angular.module('myApp', ['ui.router'])
//定义控制器
.controller('homeCtrl',["$scope","testFactory",function($scope,testFactory){
//代码规范，设置初始状态
$scope.input = {
name: '',
age: null,
title: ''
};
//接收表单传递的参数
$scope.addInput = function() {
//把获取到的参数传递到仓库中setter存储起来
testFactory.setter($scope.input);
//存储之后把input清空，防止关联存储的数据
$scope.input = {
name: '',
age: null,
title: ''
};
};
}])
//定义控制器
.controller('mineCtrl',["$scope","testFactory",function($scope, testFactory){
//获取设置页面设置的数据
$scope.persons = testFactory.getter();
}])
//定义仓库
.factory('testFactory', function(){
//定义参数对象
var testObject = {};
//用数据保存数据
testObject.list = [];
//定义传递数据的setter函数，用来接收数据
var _setter = function (data) {
testObject.list.push(data);
};
//定义获取数据的getter函数
var _getter = function () {
return testObject;
};
// 在controller中通过调setter()和getter()方法可实现提交或获取参数的功能
return {
setter: _setter,
getter: _getter
}
});
</script>
</body>
</html>
运行结果
GIF.gif
3.2基于factory和$rootScope.$broadcast()的传参
$rootScope.$broadcast()可以非常方便的设置全局事件，并让所有子作用域都监听到，并作出相应反应。
3.3基于localStorage或sessionStorage的页面跳转传参
通过LS或SS传参，一定要监听变量，否则参数改变时，获取变量的一端不会更新。
3.4基于localStorage/sessionStorage和Factory的页面传参
将不同方式组合起来可帮助你构建低耦合便于扩展和维护的代码。
举例：应用的授权。
用户登录后，后端传回一个时限性的token，该用户下次访问应用，通过检测token和相关参数，可获取用户权限，因而无须再次登录即可进入相应页面（Automatically Login）。其次所有的APIs都需要在HTTP header里注入token才能与服务器传输数据。此时我们看到token扮演一个重要角色：（a）用于检测用户权限，（b）保证前后端数据传输安全性。
参数传递
参考文献1：http://www.jb51.net/article/96506.htm
事件机制
建议观看文件2：http://blog.csdn.net/u010730126/article/details/51785669
