<p>参数传递，是在程序运行过程中，实际参数就会将参数值传递给相应的形式参数，然后在函数中实现对数据处理和返回的过程，方法有按值传递参数，按地址传递参数和按数组传递参数。</p>    <p>最近用angular做app项目，除了实际的功能外，遇到很多坑，首先，我选用了angular框架，angular框架的优点我就不说了，但是确在其中遇到了很多坑，今天的主题是关于整理angularJS使用中传递参数的问题。</p>    <h3>一、ngRoute中参数传递问题</h3>    <p>1.1 ng-href中的参数传递</p>    <p>html中代码</p>    <pre>  <code class="language-javascript"><a ng-href="#/list/{{ id }}"> ID{{ id }}</a></code></pre>    <p>app.js中的代码</p>    <pre>  <code class="language-javascript">//主入口文件  //依赖于路由模块  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'      })  }])</code></pre>    <p>参数接收</p>    <pre>  <code class="language-javascript">angular.module('myApp')  //依赖注入$css（这个是angularCSS这个插件中的服务）      .controller("CarCtrl",['$routeParams',function($routeParams){          //$routeParams 可以获取到通过路由穿过来的所有参数，我们可以通过点语法获取到相应的参数          var self = this;          self.name = $routeParams.id;      }])</code></pre>    <h3>二、ui.router中参数传递问题</h3>    <p>2.1 ui-sref中的参数传递</p>    <p>html中使用ui-sref</p>    <pre>  <code class="language-javascript"><li ng-repeat="item in marketCtrl.getData"  ui-sref=".categary({value:item.id})">{{item.name}}</li></code></pre>    <p>app.js</p>    <pre>  <code class="language-javascript">//主入口文件  //依赖于路由个模块  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'              })                  }])</code></pre>    <p>参数接收</p>    <pre>  <code class="language-javascript">angular.module('myApp')      .controller('ProInfoCtrl', ['$stateParams',function($stateParams){          var self = this;          self.value = $stateParams.value;      }] )</code></pre>    <p>2.2 $state.go中的参数传递</p>    <p>html中</p>    <pre>  <code class="language-javascript"><img ng-click="homeCtrl.goDetail(name)" /></code></pre>    <p>首先确定此时是跳转到哪个页面，跳转到哪个页面就在哪个页面的路由中接收参数，比如此时我是跳转到详情页面。</p>    <p>app.js中</p>    <pre>  <code class="language-javascript">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'              })          }])</code></pre>    <p>参数接收并对其进行操作</p>    <pre>  <code class="language-javascript">//注意：这里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;              }          });      }])</code></pre>    <h3>三、其他参数传递</h3>    <p>3.1基于factory的页面跳转传参</p>    <p>假设有N个页面，每个页面都需要用户填选信息，最终引导用户至尾页提交，同时后一个页面要显示前面所有页面填写的信息。这个时候用factory传参是比较合理的选择</p>    <pre>  <code class="language-javascript">.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      };  });</code></pre>    <p>举个栗子</p>    <p>为了方便观看，我把所有配置写在一个页面中，正式书写的时候，注意代码规范</p>    <pre>  <code class="language-javascript"><!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></code></pre>    <p>运行结果</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/581f27e6347b59eeeeabdfb9f1bfb0a4.gif"></p>    <p style="text-align:center">GIF.gif</p>    <p>3.2基于factory和$rootScope.$broadcast()的传参</p>    <p>$rootScope.$broadcast()可以非常方便的设置全局事件，并让所有子作用域都监听到，并作出相应反应。</p>    <p>3.3基于localStorage或sessionStorage的页面跳转传参</p>    <p>通过LS或SS传参，一定要监听变量，否则参数改变时，获取变量的一端不会更新。</p>    <p>3.4基于localStorage/sessionStorage和Factory的页面传参</p>    <p>将不同方式组合起来可帮助你构建低耦合便于扩展和维护的代码。</p>    <p>举例：应用的授权。</p>    <p>用户登录后，后端传回一个时限性的token，该用户下次访问应用，通过检测token和相关参数，可获取用户权限，因而无须再次登录即可进入相应页面（Automatically Login）。其次所有的APIs都需要在HTTP header里注入token才能与服务器传输数据。此时我们看到token扮演一个重要角色：（a）用于检测用户权限，（b）保证前后端数据传输安全性。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/07cdc478ed0e</p>    <p> </p>