Angular 中几种参数传递方式
WalSallee
8年前
<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>